Vue.js过渡类在动画完成之前消失

Question

我创建了一个Vue组件，该组件使用JavaScript钩子作为转换来调用velocity.js并为我的组件创建动画。

https://www.webpackbin.com/bins/-KiUnEo0HaCp3J4nQ9Gw

组件的slideDown工作正常。然而，当v-on:leave踢。英寸显示CSS属性设置为display: none立即因此我的slideUp动画不显示。

我想这会发生，因为过渡动画持续时间未知，因此只是简单地切换显示none和block之间。

我该如何解决这个问题？

谢谢。

Answer 1

在AccordionItem.vue中，由于您没有使用CSS进行转换，因此您需要接受来自Vue的回调，并在转换完成时通过Velocity通知它。

简单：

leave(e, done) { 
    Velocity(e, 'slideUp', { duration: 250, complete: done }); 
} 

你可以看到它的工作here

的Vue公司文档的这section解释：

当使用JavaScript的只是过渡，需要为done回调enter和leave挂钩。否则，它们将被同步调用，并且转换将立即结束。