css - VueJS的过渡和CSS动画

我试图通过遵循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/

最佳答案

这就是你要找的：
https://vuejs.org/v2/guide/transitions.html#Explicit-Transition-Durations
更新小提琴：

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

https://jsfiddle.net/f2vozp35/3/
VUE.JS将尝试智能化过渡，并等待您的动画完成，这样您可以显式地定义过渡之间的持续时间。