Sometimes, we want to smoothly animate v-show in Vue.js.
In this article, we’ll look at how to smoothly animate v-show in Vue.js.
How to smoothly animate v-show in Vue.js?
To smoothly animate v-show in Vue.js, we can use the transition component.
For instance, we write
<template>
<div>
<transition name="fade" mode="out-in">
<div key="3" v-if="show">
<div class="box yellow"></div>
</div>
<div key="1" v-if="!show">
<div class="box blue"></div>
</div>
</transition>
</div>
</template>
to add the transition component to 2 divs.
We set the name of the transition effect to get the effects to apply from the CSS styles of the classes that have name as the prefix.
We put the elements we want to animate inside.
And we add v-if to each to render the elements conditionally.
Since they’re in the transition component, we see the animation effect applied when we transition between the elements inside.
Conclusion
To smoothly animate v-show in Vue.js, we can use the transition component.