Added one frame after the element is inserted (at the same time v-enter-from is removed), removed when the transition/animation finishes. This class can be used to define the duration, delay and easing curve for the entering transition. Added before the element is inserted, removed when the transition/animation finishes. Applied during the entire entering phase. Added before the element is inserted, removed one frame after the element is inserted. There are six classes applied for enter / leave transitions. If no CSS transitions / animations are detected and no JavaScript hooks are provided, the DOM operations for insertion and/or removal will be executed on the browser's next animation frame.ĬSS-Based Transitions Transition Classes If there are listeners for JavaScript hooks, these hooks will be called at appropriate timings. If it does, a number of CSS transition classes will be added / removed at appropriate timings. Vue will automatically sniff whether the target element has CSS transitions or animations applied.

When an element in a component is inserted or removed, this is what happens: If the content is a component, the component must also have only one single root element. only supports a single element or component as its slot content. This is an example of the most basic usage: Dynamic components toggling via the special element.The enter or leave can be triggered by one of the following: It can be used to apply enter and leave animations on elements or components passed to it via its default slot. is a built-in component: this means it is available in any component's template without having to register it. These additional techniques are covered in the Animation Techniques chapter. This is covered in the next chapter.Īside from these two components, we can also apply animations in Vue using other techniques such as toggling CSS classes or state-driven animations via style bindings. for applying animations when an element or component is inserted into, removed from, or moved within a v-for list. for applying animations when an element or component is entering and leaving the DOM.

Vue offers two built-in components that can help work with transitions and animations in response to changing state:

Fade in transition