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

Question

我创建了一个 Vue 组件，它使用 javascript 钩子(Hook)作为调用 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 文档的解释:

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.