Vue Academy · Lesson

The Transition Component

v-enter-from, v-enter-active, v-enter-to, v-leave-* classes, name prop for custom classes.

The Transition Component is a free Vue Academy lesson on CoddyKit — lesson 1 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the Vue Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

What the Transition Component Does

Vue ships a built-in <Transition> component that applies enter/leave animations to a single element or component when it is inserted or removed via v-if or v-show.

It does not render any extra DOM element itself - it only manages CSS classes and timing on its child.

<Transition>
  <p v-if="show">Hello Vue</p>
</Transition>

Single Element Only

<Transition> expects exactly one direct child. Wrapping multiple sibling elements will not work - use <TransitionGroup> for lists instead.

The child must be toggled with v-if, v-show, or a dynamic component.

<!-- valid: one child -->
<Transition>
  <div v-if="open" class="panel">Content</div>
</Transition>

The Six Transition Classes

During an enter or leave, Vue automatically adds and removes six classes in sequence.

v-enter-from / v-leave-from - starting state
v-enter-active / v-leave-active - active phase (put transition here)
v-enter-to / v-leave-to - ending state

/* default prefix is "v-" */
.v-enter-active,
.v-leave-active {
  transition: opacity 0.3s ease;
}

Naming Your Transition

Give the transition a name prop so the class prefix changes from v- to your name. With name="fade" the classes become fade-enter-from, fade-enter-active, and so on.

<Transition name="fade">
  <p v-if="show">Fades in and out</p>
</Transition>

A Complete Fade Example

The classic fade animates opacity. The element starts fully transparent, the active class declares the transition, and the to-class brings it to full opacity.

.fade-enter-from {
  opacity: 0;
}
.fade-enter-active {
  transition: opacity 0.3s ease;
}
.fade-enter-to {
  opacity: 1;
}

The Enter Sequence Step by Step

When the element is inserted:

fade-enter-from and fade-enter-active are added before paint (opacity 0).
On the next frame fade-enter-from is removed and fade-enter-to is added, so opacity animates toward 1.
When the transition ends, both active and to classes are removed.

/* frame 1: opacity 0 (enter-from + enter-active) */
/* frame 2: opacity 1 (enter-to + enter-active) */

The Leave Sequence

Leaving mirrors entering with the leave classes. You often reuse the same active rule for both directions.

.fade-leave-from {
  opacity: 1;
}
.fade-leave-active {
  transition: opacity 0.3s ease;
}
.fade-leave-to {
  opacity: 0;
}

v-if Versus v-show

Both trigger transitions. v-if actually mounts and unmounts the element, while v-show keeps it in the DOM and toggles display. For v-show Vue handles the display flip around the active phase so the animation is still visible.

<Transition name="fade">
  <p v-show="visible">Toggled with display</p>
</Transition>

Appear on Initial Render

By default the transition does not run on first render. Add the appear prop so the enter animation plays when the component is first mounted.

<Transition name="fade" appear>
  <p>Animates in on page load</p>
</Transition>

Transitioning Between Two Elements

Use v-if / v-else inside one Transition to swap two elements. Give each a unique key if they are the same tag so Vue treats them as distinct.

<Transition name="fade" mode="out-in">
  <button v-if="loading" key="load">Loading...</button>
  <button v-else key="done">Done</button>
</Transition>

Reduced Motion and Accessibility

Respect users who prefer less motion. Disable or shorten transitions with the prefers-reduced-motion media query so animations do not cause discomfort.

@media (prefers-reduced-motion: reduce) {
  .fade-enter-active,
  .fade-leave-active {
    transition: none;
  }
}

Quick Check

What does fade-enter-from define?

Recap

You learned the built-in <Transition> component: it wraps one element toggled by v-if/v-show, applies six CSS classes (enter-from, enter-active, enter-to and the leave equivalents), supports a name prefix, appear for first render, and mode for swaps.

Frequently asked questions

Is the “The Transition Component” lesson free?

Yes — the full text of “The Transition Component” is free to read here on the web, and the Vue Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the Vue Academy course, upgrade to CoddyKit PRO.

What will I learn in “The Transition Component”?

v-enter-from, v-enter-active, v-enter-to, v-leave-* classes, name prop for custom classes. You practise Vue Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start Vue Academy?

No prior experience is required. Vue Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 1 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “The Transition Component” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this Vue Academy lesson?

Yes. Every Vue Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

← Back to Vue Academy