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

Posted 2023-02-16

【中文标题】Vue.js 过渡类在动画完成之前消失

【英文标题】：Vue.js transition class disappearing before animation has finished

【发布时间】：2017-09-21 02:35:26

【问题描述】：

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

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

组件的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 回调。否则，它们将被同步调用，并且过渡将立即完成。

【讨论】：

阅读该部分，感谢您的帮助！这非常有效。