VueJS 的过渡和 CSS 动画答案

【问题标题】：VueJS's transitions and CSS animationsVueJS 的过渡和 CSS 动画
【发布时间】：2018-02-06 18:34:38
【问题描述】：

我正在尝试通过遵循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/

【问题讨论】：

你能更详细地解释一下你想要达到的目标吗？
对不起，如果帖子不够明确，我只是想实现@Stephan-v 显示的内容，让我的过渡“顺利”运行，而不是像您在小提琴。

标签： css vue.js vuejs2 css-animations

【解决方案1】：

尝试为您的 div 删除 key

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

【讨论】：

转换使用这些键，如果我删除它们，转换就不会发生。

【解决方案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 将尝试对过渡进行智能处理并等待您的动画完成，这样您就可以明确定义过渡之间的持续时间。

【讨论】：

谢谢，就是这样。我虽然这是由于加载程序的动画时间（因为修改这些计时器会缩短延迟时间）。