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可以执行display: none之前具有slideUp。

jsFiddle在这里：https://jsfiddle.net/zmoc2v3n/ - 你可以看到slideDown是平滑的，slideUp不起作用。

我尝试过leave和after-leave个钩子，这些都没用。

如果我使用v-if，我会看到首先渲染元素，然后隐藏，然后发生slideDown。我仍然有before-leave立即隐藏元素的问题。

提前感谢您的帮助！

Answer 1

我在Vue Forum上问了这个问题，我想我会在这里发布答案。

尝试使用输入和离开事件，因为它们允许您放弃 Vue知道动画何时结束。

<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 hides元素

1 个答案: