VueJS's transitions and CSS animations

Question

I'm trying to implements a transition between two elements containing CSS animations simply by following the documentation's example.

My HTML contains : A button to change my state :

<button @click="toggled = !toggled">
  Toggle class ({{ toggled }})
</button>

The transition with the two loader (a red and a black one) :

<transition name="fade" mode="out-in">
  <div class="loader" v-if="toggled" key="toggled"></div>
  <div class="loader red" v-else key="notToggled"></div>
</transition>

It appears that the VueJS's transition is waiting for the animation to finish before displaying the next. Am I doing something wrong ?

Reproduce the issue : https://jsfiddle.net/f2vozp35/2/

Could you explain in a little more detail what you're trying to achieve? — Rwd
– Rwd, Commented Aug 29, 2017 at 11:38
Sorry if the post wawsn't explicit enough, I was just trying to achieve what @Stephan-v shown, to have my transition running "smoothly" and not with the delay that you can see in the Fiddle. — Thomas Ferro
– Thomas Ferro, Commented Aug 29, 2017 at 12:03

tony19 · Accepted Answer · 2022-07-15 02:22:51Z

4

This is what you are looking for:

https://v2.vuejs.org/v2/guide/transitions.html#Explicit-Transition-Durations

Updated fiddle:

<transition name="fade" mode="out-in" :duration="300">

https://jsfiddle.net/f2vozp35/3/

Vue.js will try to be smart about the transition and will wait for your animation to finish, this way you can explicitly define the duration between the transition.

edited Jul 15, 2022 at 2:22

tony19

140k24 gold badges281 silver badges354 bronze badges

answered Aug 29, 2017 at 12:00

Stephan-v

20.5k32 gold badges125 silver badges213 bronze badges

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

1 Comment

Thomas Ferro Over a year ago

Thank, that was it. I though it was due to the animation time of the loaders (since modifying these timers shorten the time of the delay).

Nafiul Islam · Accepted Answer · 2017-08-29 12:03:29Z

-2

Try removing key for your divs

<transition name="fade" mode="out-in">
    <div class="loader" v-if="toggled"></div>
    <div class="loader red" v-else></div>
</transition>

answered Aug 29, 2017 at 12:03

Nafiul Islam

1,2208 silver badges20 bronze badges

1 Comment

Thomas Ferro Over a year ago

The keys are used by the transition, if I remove them the transition doesn't happen.

Collectives™ on Stack Overflow

VueJS's transitions and CSS animations

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related