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

【问题标题】：Vue.js transition class disappearing before animation has finishedVue.js 过渡类在动画完成之前消失
【发布时间】：2017-09-21 02:35:26
【问题描述】：

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

组件的slideDown 工作正常。但是，当v-on:leave 启动时。似乎显示CSS 属性立即设置为display: none，因此我的slideUp 动画没有显示。

我猜这是因为过渡动画持续时间未知，因此只是在显示 none 和 block 之间切换。

我怎样才能解决这个问题？

谢谢。

【问题讨论】：

【解决方案1】：

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

简单地说：

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

你可以看到它在工作here

Vue 文档的 section 解释说：

使用纯 JavaScript 转换时，enter 和 leave 挂钩需要 done 回调。否则，它们将被同步调用，并且过渡将立即完成。

【讨论】：