相关疑难解决方法(0)

我知道在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;
        },
})