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

我正在学习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>

slide_down（）

工作正常

slide\u up（）

不起作用，定义消失，没有转换。

console.log（）

显示元素在Velocity执行

slideUp

之前有

display:none

JSFIDLE在这里：-您可以看到slideDown是平滑的，slideUp不工作

我尝试了

leave

和

after leave

挂钩，但都没有用

如果我使用

v-if

，我会看到元素先被渲染，然后被隐藏，然后发生向下滑动。在离开之前，我仍然存在

的问题，即立即隐藏元素

提前感谢您的帮助！
我在上问了这个问题，并想把答案贴在这里

尝试使用enter和leave事件，因为它们允许您
Vue知道动画何时完成

原来我的问题更多的是速度而不是Vue


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

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

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

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

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