Vue.js call transition explicitly

Question

I know the typical way for doing animations in Vue.js, adding the transition="my-animation" on the HTML element.

I'm wondering if can I call explicitly that animation form code and not just depending on v-show / v-if.

I'd like to "shake" a component (A) each time another one (B) is clicked. For that I use a pulse transition (from animated.css).

For the moment B dispatches a message each time is clicked.

A receives the message and sets it's property animate to true. Then A shakes thanks to, in the HTML:

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

Onces it's being animated, won't do it anymore, since A's animateprop is already set to true. I'd need to reset it to false so on next click the component could shake again.

I've tried with the transition hooks:

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

Answer 1

It won't animate (shake) again since the element already has the class. You need to remove it first.

There are probably a couple of ways to accomplish this, using setTimeout to set animate to false is a very easy approach.

Using Vue's class binding (ex. :class="{'bounce animated': animated}"), run the animation by setting the animated property to true, then remove the class the animation by setting it back to false after the amount of time it takes to finish.

Here is a fiddle with exactly what you want to do, using setTimeout to set animate back to false after a 1s animation.

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