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.
Transitions
In Vue transitions there are a special / magic tag that are triggered by:
- Conditional rendering (using v-if)
- Conditional display (using v-show)
- Dynamic components
- Component root nodes
Example of use:
hello
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 (
- v-enter is removed at the end of animation (animationend event)
In transition v-enter is removed after first frame.
da Alessandro