Vue.js 显式调用转换

Question

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

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

每次单击另一个组件 (B) 时，我都想 "shake" 一个组件 (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 的 animateprop 已经设置为 true。我需要将其重置为 false，以便在下次单击时组件可能会再次摇晃。

我试过转换挂钩：

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

Answer 1

它不会再次动画（摇动），因为该元素已经有 class。您需要先将其删除。

可能有几种方法可以实现此目的，使用 setTimeout 将 animate 设置为 false 是一种非常简单的方法。

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

这里有一个 fiddle 正是您想要做的，使用 setTimeout 在 1 秒动画后将动画设置回 false。

Vue.js call transition explicitly