Vue 转换：v-on:before-leave 在回调执行之前隐藏元素

Question

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

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

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

最初每个列表项的 body 是隐藏的，当用户单击标题时它应该进行幻灯片转换。

因为每个列表项的body是一个可变高度，我需要在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} objects.

的数组

相关方法如下：

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 钩子，但没有用。

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

在此先感谢您的帮助！

Answer 1

我在 Vue Forum 上问过这个问题，我想我会 post 在这里回答。

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.

Vue 转换：v-on:before-leave 在回调执行之前隐藏元素

Vue transition: v-on:before-leave hides element before callback executes

velocity.js

vue.js

vuejs2