Vue.js显式调用转换

Question

我知道在Vue.js中进行动画的典型方法,transition="my-animation"在HTML元素上添加.

我想知道我是否可以明确地调用该动画形式代码而不仅仅依赖于v-show/ v-if.

每次点击另一个(B)时,我想"摇动"一个组件(A).为此我使用pulse转换(来自animated.css).

目前,B每次点击都会发送一条消息.

A接收消息并将其属性设置animate为true.然后A感谢,在HTML中:

<div id="A" class="animated" 
    transition="pulse" 
    v-show="show" 
    v-bind:class="{ 'pulse': animate }"
 >

一旦它被动画,就不会再这样了,因为A的animate道具已经设置为真.我需要将其重置为false,以便下次单击该组件可能会再次摇晃.

我试过过渡钩子:

Vue.transition('pulse', {
        afterLeave: function (el) {
            this.animate = false;
        },
})

Answer 1

它不会再动画(摇动),因为元素已经有了类.您需要先将其删除.

可能有几种方法可以实现这一点,使用setTimeout将animate设置为false是一种非常简单的方法.

使用Vue的类绑定(例如:class="{'bounce animated': animated}"),通过将animated属性设置为true来运行动画,然后通过在完成所需的时间之后将其设置为false来移除动画类.

这是一个完全符合你想要做的事情,setTimeout用于在1s动画后将动画设置为假.

https://jsfiddle.net/crabbly/xcLrbtzj/