VueJS的过渡和CSS动画

我试图实现包含CSS动画两个元素之间的转换只需遵循documentation's example。VueJS的过渡和CSS动画

我的HTML包含：A键来改变我的状态：

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

与2名装填手（红色和黑色的）过渡：

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

来源

2017-08-29 Thomas Ferro

你能否更详细一点你要达到什么样的解释？ –

对不起，如果帖子不够明确，我只是试图达到@Stephan-v所示的效果，让我的转换“顺利”运行，而不是延迟，你可以在小提琴中看到。 –

这是你在找什么：

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 w ^生病尝试对转换做出明智的决定，并等待您的动画完成，这样您可以明确定义转换之间的持续时间。

来源

2017-08-29 12:00:33

谢谢，就是这样。我虽然是由于装载机的动画时间（因为修改这些定时器缩短了延迟的时间）。 –

-1

尝试删除key您的div

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

来源

2017-08-29 12:03:29

按键用于转换，如果我删除它们，转换不会发生。 –

VueJS的过渡和CSS动画

回答

相关问题