vue.js - vue过渡: v-on:before-leave hides element before callback executes

Question

我正在学习 Vue，对此很困惑。

我正在尝试复制 jQuery 的 slideToggle()。

我有一个项目列表，每个项目都有一个标题和一个正文。

最初每个列表项的主体都是隐藏的，当用户点击标题时它应该进行幻灯片切换。

因为每个列表项的主体是可变高度，我需要在 JS 中执行此操作，因为 CSS 无法正确执行 height: auto 的转换。 (即使 max-height 也远非平滑。

所以我使用的是 Velocity.js 库，slideDown 非常完美。 slideUp 无法运行，因为(我认为)Vue 已经隐藏了该元素。

这是(简化的)模板:

<ul class="list-group">
    <li class="list-group-item" v-for="word in saved_definitions">
        <h3 @click="word.show = !word.show">
            {{ word.word }}
        </h3>
        <transition v-on:before-enter="slide_down" v-on:before-leave="slide_up" :css="false">
            <div v-show="word.show">
                {{ word.definition }}
            </div>
        </transition>
    </li>
</ul>

saved_definitions 是 {word: '', definition: '', show: true} 对象的数组。

相关方法如下:

slide_down: function(el) {
    Velocity(el, 'slideDown', 'fast');
},

slide_up: function(el) {
    console.log(el);
    Velocity(el, 'slideUp', 'fast');
}

slide_down() 运行完美。

slide_up() 不起作用，定义消失，没有过渡。 console.log() 显示该元素在 Velocity 可以执行 slideUp 之前具有 display: none。

jsFiddle 在这里:https://jsfiddle.net/zmoc2v3n/ - 你可以看到 slideDown 很流畅，slideUp 不起作用。

我已经尝试了 leave 和 after-leave 钩子(Hook)，但没有帮助。

如果我使用 v-if，我会看到该元素首先呈现，然后隐藏，然后发生 slideDown。 before-leave 立即隐藏元素时，我仍然遇到同样的问题。

预先感谢您的帮助!

Answer 1

我在 Vue Forum 上问过这个问题，并认为我会在此处发布答案。

Try using the enter and leave events instead, as they allow you to let Vue know when your animation is finished.

<transition @enter="slide_down" @leave="slide_up"></transition>

在js中:

function slide_down(el, done) {
    Velocity(el, 'slideDown', {
        duration: 'fast',
        complete: done
    })
}

function slide_up(el, done) {
    Velocity(el, 'slideUp', {
        duration: 'fast',
        complete: done
    })
}

原来我的问题更多是 Velocity 而不是 Vue。

Here is the working jsfiddle.