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

这个section的Vue文档解释说：

  

使用仅限JavaScript的转换时，done和enter挂钩需要leave回调。否则，它们将被同步调用，转换将立即完成。