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

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 解释：

When using JavaScript-only transitions, the done callbacks are required for the enter and leave hooks. Otherwise, they will be called synchronously and the transition will finish immediately.

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

Vue.js transition class disappearing before animation has finished

animation

vue.js

vue-component

vuejs2