CODEWITHSUNDEEP
cssvue.jsvuejs2css-animations
Thomas Ferro
Thomas Ferro

Reputation: 2442

VueJS's transitions and CSS animations

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/

Upvotes: 1

Views: 2238

Answers (2)

Stephan-v
Stephan-v

Reputation: 20299

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.

Upvotes: 4

Nafiul Islam
Nafiul Islam

Reputation: 1220

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>

Upvotes: -2

Related Questions