问题:列表卡片翻转效果动画,只有第一次加载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,重新定义动画名称,不要方便使用一个,我就是因为一开始全用的一个,没有效果

 

 

 

    

  

 

 

         

Logo

前往低代码交流专区

更多推荐