Transition

The <transition> component lets you apply enter/leave animations for elements or components in Vue.

Use <transition> to animate the appearance and disappearance of elements or components, such as modals, tooltips, or notifications.

When to Use

• Animating elements entering or leaving the DOM.
• Adding fade, slide, or custom CSS transitions to UI elements.

Props

• name: Base name for transition CSS classes.
• appear: Apply transition on initial render.
• mode: Control the transition sequence (in-out or out-in).

<transition name="slide" appear mode="out-in">
  <div v-if="show">Sliding in!</div>
</transition>

Example

<transition name="fade">
  <p v-if="show">Hello!</p>
</transition>

Notes

• Define CSS classes for the transition (e.g., .fade-enter-active, .fade-leave-active, etc.).
• <transition> only applies to a single element or component.
• Use JavaScript hooks for more advanced animations.

export default {
  methods: {
    beforeEnter(el) {
      /* ... */
    },
    enter(el, done) {
      /* ... */
    },
    leave(el, done) {
      /* ... */
    },
  },
};