With the directive
v-transition="my-transition" applied, Vue will:
Vue.transition(id, def)or passed in with the
transitionsoption, with the id
If no transitions/animations are detected, the DOM manipulation is executed on next frame.
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 Vue instance methods, e.g.
A typical CSS transition looks like this:
<p class="msg" v-if="show" v-transition="expand">Hello!</p>
You also need to define CSS rules for
The classes being toggled are based on the value of your
v-transition directive. In the case of
v-transition="fade", the classes being toggled will be
.fade-leave. When no value is provided they will default to
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.
When multiple elements are being transitioned together, Vue.js batches them and only applies one forced layout.
CSS animations are applied in the same way with CSS transitions, the difference being 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-transition="bounce">Look at me!</p>
All of the above hook functions are called with their
this contexts set to the associated Vue instances. If the element is the root node of a Vue instance, that instance will be used as the context. Otherwise, the context will be the owner instance of the transition directive.
Then you can use it by providing the transition id to
v-transition. Note this has higher priority than CSS transitions.
Next: Building Larger Apps.