Question

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

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

我想＆＃34;摇晃＆＃34;每次点击另一个（B）时的组件（A）。为此我使用pulse转换（来自animated.css）。

目前，B每次点击都会发送一条消息。

A接收消息并将其属性animate设置为true。然后感谢，在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将动画设置为false是一种非常简单的方法。

使用Vue的类绑定（例如:class="{'bounce animated': animated}"），通过将animated属性设置为true来运行动画，然后通过在动画时间之后将动画设置为false来删除动画类需要完成。

使用setTimeout在1s动画后将动画设置为false，这就是你想要做的事情的小提琴。