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;
        },
})

When you say animations, do you mean transitions? In that case, you could just apply the same classes vue uses manually: vuejs.org/guide/transitions.html#Example. my-animation-enter, my-animation-leave, my-animation-transition. — nils
– nils, Commented May 26, 2016 at 8:34
Yep, transition. Then do I need to use v-bind or something like that? — javier_domenech
– javier_domenech, Commented May 26, 2016 at 8:38
Yes, you could bind the classes: v-bind:class="currentAnimationClass" where currentAnimationClass could be one of your animation class values. — nils
– nils, Commented May 26, 2016 at 8:54
thank you, now works half way. I can call it once changing the property binded, but next time user clicks on the button the property is already set so does not make any transition more. I've tried to unset the property in the transition hooks but I still couldn't achieve it. Any advice for that @nils? — javier_domenech
– javier_domenech, Commented May 26, 2016 at 10:37

crabbly · Accepted Answer · 2016-05-28 20:00:47Z

14

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/

answered May 28, 2016 at 20:00

crabbly

5,2261 gold badge26 silver badges48 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Robert Kirsz Over a year ago

Other than setTimeout, you can also use animationend event to reset the animation jsfiddle.net/RobertKirsz/muo19o4x

crabbly Over a year ago

@RobertKirsz Cool!

Hartmut Over a year ago

++ solution from @RobertKirsz using @animationend see official vue docs: vuejs.org/v2/guide/transitions.html#CSS-Animations

Collectives™ on Stack Overflow

Vue.js call transition explicitly

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related