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

  • Z时代
  • 2024-03-05
  • 分类：IT

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

// 添加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的动画效果，但实际只有第一次按键有动画效果，后面按键都不会再触发动画了，要怎么解决呢？

回答：

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...

以上是 vue中怎么使animate动画重复运行？ 的全部内容， 来源链接： utcz.com/p/935763.html

回到顶部