0

例如一个引入了 Animate.cssTimeline 组件:

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

如下图:

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

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

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

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

查看全部 2 个回答

0

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

推荐答案