Adding Transition Effects
All Vue.js transitions are triggered only if the DOM manipulation was applied by Vue.js, either through built-in directives, e.g.
v-if, or through ViewModel instance methods, e.g.
To enable CSS transitions on an element, simply give it an empty
<p class="msg" v-if="show" v-transition>Hello!</p>
You will also need to provide CSS rules for
v-leave classes (the class names can be configured with
Now when the
show property changes, Vue.js will insert or remove the
<p> element accordingly, and apply transition classes as specified below:
showbecomes false, Vue.js will:
v-leaveclass to the element to trigger the transition;
- Wait for the transition to finish; (listening to a
- Remove the element from the DOM and remove
showbecomes true, Vue.js will:
v-enterclass to the element;
- Insert it into the DOM;
- Force a CSS layout so
v-enteris actually applied;
- Remove the
v-enterclass to trigger a transition back to the element’s original state.
It is important to ensure that the target element’s CSS transition rules are properly set and it will fire a
transitionend event. Otherwise Vue.js will not be able to determine when the transition is finished.
CSS animations are applied in a similar fashion with transitions, but using the
v-animation directive. The difference is that
v-enter is not removed immediately after the element is inserted, but on an
Example: (omitting prefixed CSS rules here)
<p class="animated" v-if="show" v-animation>Look at me!</p>
The third argument,
timeout, is a wrapped version of
setTimeout. You should use it in place of
setTimeout so that when an effect is cancelled, its associated timers can be cleared.
Then you can use it by providing the effect id to
Next: Composing ViewModels.