CSS list transition with Vue.js
In Vue there are transition and animation.
Transition are about elements that enter or go out.
Animation are a more generic concept.
Transition are about elements that enter or go out.
Animation are a more generic concept.
Transitions
- Conditional rendering (using v-if)
- Conditional display (using v-show)
- Dynamic components
- Component root nodes
Example of use:
<div id="demo"> <button v-on:click="show = !show"> Toggle </button> <transition name="fade"> <p v-if="show">hello</p> </transition> </div>
Vue transition decide to apply css class in a dynamic way.
The classes that vue decide to apply are six:
- v-enter
- v-enter-to
- v-leave
- v-leave-to
Animation
Animation use same magic tag (<transition>) but there is a behavior very different:
- v-enter is removed at the end of animation (animationend event)
In transition v-enter is removed after first frame.