Vue动画没效果问题
问题:列表卡片翻转效果动画,只有第一次加载dom的时候执行一次。 1、点击列表中分页的时候,不管加载第几页的数据,翻转动画效果都不执行 2、点击卡片操作的时候,当前卡片的翻转效果消失了,其他改变的样式都是好的 3、单独点击卡片效果的显示了,然后再单击分页时,那个被单独操作的卡片,分页时的动画又没有了解决: 动画css:@keyfr...
问题:列表卡片翻转效果动画,只有第一次加载dom的时候执行一次。
1、点击列表中分页的时候,不管加载第几页的数据,翻转动画效果都不执行
2、点击卡片操作的时候,当前卡片的翻转效果消失了,其他改变的样式都是好的
3、单独点击卡片效果的显示了,然后再单击分页时,那个被单独操作的卡片,分页时的动画又没有了
解决:
动画css:
@keyframes fanzhuan{
from{ transform: rotateY(0)}
to{ transform: rotateY(180deg)}
}
@keyframes fanzhuan1{
from{ transform: rotateY(0)}
to{ transform: rotateY(180deg)}
}
.fanye{
animation:fanzhuan 0.5s linear 1 ;
}
.fanye1{
animation:fanzhuan1 0.5s linear 1 ;
}
js:
Vue 实例中data 中定义一个属性,用来控更新动画效果的执行,例如:isUpdate:false
点击分页加载数据成功时,给list赋值时,加,
this_.isupdate = false//每次数据加载完成,先把控制动画样式的isupdate设置成false
this_.$nextTick(function(){//如果不是更新dom,可不需要这个,$nextTick就是用来知道什么时候dom更新完成的
setTimeout(()=>{
this_.list = page.list
this_.update = true
}, 100)
})
html:
//红色标注的地方
<li v-for="(item,index) in list" :key="index" :class="[{fanye:update},{fanye1:item.isChecked}]">
解决以上2.3的方法是,重新定义.class,重新定义动画名称,不要方便使用一个,我就是因为一开始全用的一个,没有效果
更多推荐
所有评论(0)