- Getting Started
- The Vue Instance
- Data Binding Syntax
- Computed Properties
- Class and Style Bindings
- Conditional Rendering
- List Rendering
- Methods and Event Handling
- Form Input Bindings
- Reactivity in Depth
- Custom Directives
- Custom Filters
- Building Large-Scale Apps
- Comparison with Other Frameworks
- Join the Vue Community!
To apply transition effects, you need to use the special
transition attribute on the target element:
transition attribute can be used together with:
v-for(triggered for insertion and removal only, for animating changes of order
use vue-animated-list plugin)
- Dynamic components (introduced in the next section)
- On a component root node, and triggered via Vue instance DOM methods, e.g.
When an element with transition is inserted or removed, Vue will:
Vue.transition(id, hooks)or passed in with the
transitionsoption, using the id
"my-transition". If it finds it, it will call the appropriate hooks at different stages of the transition.
Automatically sniff whether the target element has CSS transitions or CSS animations applied, and add/remove the CSS classes at the appropriate times.
A typical CSS transition looks like this:
You also need to define CSS rules for
You can achieve different transitions on the same element by using dynamic binding:
The classes being added and toggled are based on the value of the
transition attribute. In the case of
transition="fade", three CSS classes are involved:
.fade-transitionwill be always present on the element.
.fade-enterdefines the starting state of an entering transition. It is applied for a single frame and then immediately removed.
.fade-leavedefines the ending state of a leaving transition. It is applied when the leaving transition starts and removed when the transition finishes.
transition attribute has no value, the classes will default to
New in 1.0.14
You can specify custom
leaveClass in the transition definition. These will override the conventional class names. Useful when you want to combine Vue’s transition system with an existing CSS animation library, e.g. Animate.css:
New in 1.0.14
Vue.js needs to attach event listeners in order to know when the transition has ended. It can either be
animationend, depending on the type of CSS rules applied. If you are only using one or the other, Vue.js can automatically detect the correct type. However, if in some cases you want to have both on the same element, for example having a CSS animation triggered by Vue, and also having a CSS transition effect on hover, you will have to explicitly declare the type you want Vue to care about:
show property changes, Vue.js will insert or remove the
<div> 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, then remove the
v-enterclass to trigger a transition back to the element’s original state;
- Wait for the transition to finish;
In addition, if you remove an element when its enter transition is in progress, the
enterCancelled hook will be called to give you the opportunity to clean up changes or timers created in
enter. Vice-versa for leaving transitions.
All of the above hook functions are called with their
this contexts set to the associated Vue instances. It follows the same rule of compilation scopes: a transition’s
this context will point to the scope it is compiled in.
leave can optionally take a second callback argument. When you do so, you are indicating that you want to explicitly control when the transition should end, so instead of waiting for the CSS
transitionend event, Vue.js will expect you to eventually call the callback to finish the transition. For example:
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)
done callbacks are required for the
leave hooks, otherwise they will be called synchronously and the transition will finish immediately.
It’s also a good idea to explicitly declare
Then you can use it with the
transition attribute, same deal:
It’s possible to create staggering transitions when using
v-for. You can do this either by adding a
leave-stagger attribute to your transitioned element:
Or, you can provide a
leaveStagger hook for finer-grained control:
stagger attribute will not affect the transition of items added or removed by
v-show. Only changes to the array or object provided to
v-for will cause transitions to stagger.