The Transition Component

Welcome to the NOVA LAB Holographic Chamber! The year is 2087 — the space station's interfaces must be not only functional, but also elegantly animated. When Dr. Nova opens the reactor diagnostics panel, the data doesn't appear suddenly — it smoothly slides onto the screen, and upon closing, it gracefully fades away. Vue provides a built-in

<Transition>

component that lets you add exactly these kinds of smooth enter and leave animations to elements.

What is

<Transition>

?

<Transition>

is a built-in Vue component that automatically adds and removes CSS classes when an element appears and disappears. It doesn't render any additional DOM element — it's an "invisible wrapper":

1<Transition name="fade">
2  <div v-if="showPanel">Station status panel</div>
3</Transition>

When

showPanel

changes from

false

to

true

, Vue adds the appropriate CSS classes to the

<div>

element, triggering the enter animation. When the value changes back to

false

, Vue triggers the leave animation, and only after it completes does it remove the element from the DOM.

Important limitation:

<Transition>

wraps exactly one element or component. If you need to animate a list — use

<TransitionGroup>

(you'll learn about it later in this module).

6 CSS Transition Classes

Vue automatically adds and removes 6 CSS classes during the animation lifecycle. This is the foundation for understanding the transition system:

Enter — when the element appears:

• v-enter-from

  — the starting state of the enter transition. Added before the element is inserted, removed after one frame.

• v-enter-active

  — active throughout the entire enter phase. This is where you define

  transition

  or

  animation

  .

• v-enter-to

  — the ending state of the enter transition. Added after one frame (when

  -from

  is removed), removed when the animation finishes.

Leave — when the element disappears:

• v-leave-from

  — the starting state of the leave transition. Added immediately when leave is triggered.

• v-leave-active

  — active throughout the entire leave phase.

• v-leave-to

  — the ending state of the leave transition. Added after one frame, removed when the animation finishes.

The sequence of events looks like this:

1Enter: enter-from → (1 frame) → enter-to + enter-active → (animation end) → cleanup
2Leave: leave-from → (1 frame) → leave-to + leave-active → (animation end) → element removed

Simple fade effect

The simplest and most commonly used effect — smooth appearing and disappearing:

1.fade-enter-active,
2.fade-leave-active {
3  transition: opacity 0.5s ease;
4}
5
6.fade-enter-from,
7.fade-leave-to {
8  opacity: 0;
9}

The

-from

and

-to

classes define the start and end states (in this case:

opacity: 0

for invisibility). The

-active

classes define the duration, easing type, and which properties to animate.

Slide effect

Animations can combine multiple CSS properties at once:

1.slide-enter-active,
2.slide-leave-active {
3  transition: all 0.3s ease;
4}
5
6.slide-enter-from {
7  opacity: 0;
8  transform: translateY(-20px);
9}
10
11.slide-leave-to {
12  opacity: 0;
13  transform: translateY(20px);
14}

The element enters by sliding down from above, and leaves by sliding downward — like an alarm panel on the NOVA LAB station that drops from the top of the screen.

v-if vs v-show with Transition

<Transition>

works with both

v-if

and

v-show

, but their behavior differs:

• v-if

  — the element is physically added to and removed from the DOM. The leave animation finishes before the element is removed. Better for elements that are toggled infrequently.

• v-show

  — the element is always in the DOM, only

  display: none

  is toggled. Faster switching, better for elements that appear and disappear frequently (e.g., an alerts panel).

1<template>
2  <div class="control-panel">
3    <button @click="showStatus = !showStatus">Toggle Panel</button>
4
5    <!-- v-if: element added/removed from DOM -->
6    <Transition name="fade">
7      <div v-if="showStatus" class="status-panel">
8        Reactor status: ONLINE
9      </div>
10    </Transition>
11
12    <!-- v-show: element always in DOM, display toggled -->
13    <Transition name="fade">
14      <div v-show="showAlert" class="alert-panel">
15        Warning: temperature rising!
16      </div>
17    </Transition>
18  </div>
19</template>
20
21<script setup>
22import { ref } from 'vue'
23
24const showStatus = ref(true)
25const showAlert = ref(false)
26</script>

When to use Transition?

• Showing/hiding modals, tooltips, dropdowns
• Switching between views (

  v-if

  /

  v-else

  )
• Animating element entry on load
• Warnings and notifications on the space station