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

1<script setup>
2import { ref } from 'vue'
3
4const showPanel = ref(true)
5</script>
6
7<template>
8  <div class="nova-lab">
9    <h1>NOVA LAB - Transition Demo</h1>
10
11    <button @click="showPanel = !showPanel" class="btn">
12      {{ showPanel ? 'Hide panel' : 'Show panel' }}
13    </button>
14
15    <Transition name="fade">
16      <div v-if="showPanel" class="status-panel">
17        <h3>Station Status</h3>
18        <p>Systems: Operational</p>
19        <p>Temperature: -63°C</p>
20        <p>Pressure: 0.6 kPa</p>
21      </div>
22    </Transition>
23  </div>
24</template>
25
26<style scoped>
27.nova-lab {
28  background: #0a0e27;
29  color: #00ff88;
30  min-height: 100vh;
31  padding: 20px;
32  font-family: monospace;
33}
34h1 { color: #00ff88; margin-bottom: 20px; }
35
36.btn {
37  background: #00b4d8;
38  color: white;
39  border: none;
40  padding: 10px 20px;
41  border-radius: 8px;
42  cursor: pointer;
43  font-size: 14px;
44  margin-bottom: 15px;
45}
46
47.status-panel {
48  background: rgba(0, 180, 216, 0.1);
49  border: 2px solid #00b4d8;
50  padding: 20px;
51  border-radius: 12px;
52}
53
54/* Klasy Transition */
55.fade-enter-active,
56.fade-leave-active {
57  transition: opacity 0.5s ease;
58}
59
60.fade-enter-from,
61.fade-leave-to {
62  opacity: 0;
63}
64</style>