vue中怎么使animate动画重复运行？

Question

// 添加active class时，会有3s动画效果
 <div :class="{'active': item.active}"
 
 </div>

// active class的动画css
&.active {
   animation: keyClick 3s linear;
}

// 按键事件里逻辑
if(item.active) {
   // 每次按键都先判断是否有active了，如果存在，则先移除
   item.active = false;
} 
item.active = true;                        
                      

我在按键时先移除active class，然后再添加上，需要的效果是每次按键都有3s的动画效果，但实际只有第一次按键有动画效果，后面按键都不会再触发动画了，要怎么解决呢？

Answer 1

vue 中状态更新并不会同步渲染 DOM，也就是说设置 item.active = false 时 DOM 并未更新，class active 并未移除。代码立即执行 item.active 最终渲染的结果是 class active 一直存在。因此，需要使用 this.$nextTick(() => {item.active = true;}) 保证 item.active = true 在 DOM 更新后再执行。

官方文档对这部分的介绍：https://cn.vuejs.org/v2/guide...