vue2.0 + Animate.css，如何使得在每次数据更新后，自动触发动画？

Question

例如一个引入了 Animate.css 的 Timeline 组件：

<Timeline>
    <TimelineItem v-for="(item, index) in data" :key="index" class='animated slideInDown'>
        <p>{{ item.content }}</p>
    </TimelineItem>
</Timeline>

如下图：

期望效果：
每次 data 数据更新，列表中每个 item 都会执行一个 slideDown 动画，以达到一个平滑、用户体验良好的时间线更新效果。

实际效果：
只有首次加载页面是有动画，每次 data 数据更新，视图随之更新，但不会触发动画。

已有尝试：
当前尝试了 动态绑定 :class 、this.$nextTick() 、vue 生命周期钩子改变 class，都达不到目的。

请问还有什么方法？或者有什么其他的比较好用的时间线动态更新插件？

Answer 1

https://jsfiddle.net/6khv1dc1/

Answer 2

:key="index" 每次都一样 1 2 3 4 5
Vue会重用这个dom
所以你这里的 key 你要用一些能够严格区分的，比如 GUID

Answer 3

我碰到了和你一样的问题
要多次触发animated 就得取消掉class 在赋值class
但是在同一个function里面
先 this.userShake = false
在 this.userShake = true
是没有作用的他还是会安装最终值去渲染所以 我先试了this.$nextTick(()=>{this.userShake = true})没有效果
然后用了 setTimeout有效果 但是这样不是很理想
之后我试了 promise 代码量有点多 也可以达到预期效果

Answer 4

可以在transition group外面再加一层transition，让内层的元素作为一个整体可以实现每次切换tab都以动画来过渡

<transition name="fade">
   <transition-group name="list"
                     tag="ul" 
                     :key="currentKey"
                     mode='out-in'>
       <li v-for="item in goods" v-show="Current(item.category)" :key="item.id">{{item.title}}
   </transition-group>
 </transition>