css - VueJS 的过渡和 CSS 动画

Question

我正在尝试通过遵循 documentation's example 来实现包含 CSS 动画 的两个元素之间的过渡。 .

我的 HTML 包含:一个改变状态的按钮:

<button @click="toggled = !toggled">
  Toggle class ({{ toggled }})
</button>

两个加载器(一个红色和一个黑色)的转换:

<transition name="fade" mode="out-in">
  <div class="loader" v-if="toggled" key="toggled"></div>
  <div class="loader red" v-else key="notToggled"></div>
</transition>

看起来 VueJS 的转换 在显示下一个之前等待动画完成。我做错了什么吗？

重现问题:https://jsfiddle.net/f2vozp35/2/

Answer 1

这就是你要找的:

https://v2.vuejs.org/v2/guide/transitions.html#Explicit-Transition-Durations

更新的 fiddle :

<transition name="fade" mode="out-in" :duration="300">

https://jsfiddle.net/f2vozp35/3/

Vue.js 将尝试对过渡进行智能处理，并等待您的动画完成，这样您就可以明确定义过渡之间的持续时间。