Vue动画没效果问题

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