Vue.js course · Module 13: Transitions & Animations

Project: NOVA LAB Animation System

3 min read

In this lesson4

Time to combine all animation techniques into a cohesive space station interface system! In this project, you'll create a complete NOVA LAB dashboard that uses <Transition>, <TransitionGroup>, named transitions, out-in mode, staggered animations, appear, and accessibility - everything you've learned in this module.

Module Summary

In this module you learned:

<Transition> - animating enter/leave of single elements with 6 CSS classes
Named Transitions - defining multiple animation types with the name attribute
Transition Modes (mode) - controlling animation order when switching views (out-in, in-out)
JavaScript Animation Hooks - full control over animations through @enter, @leave, and the done() callback
<TransitionGroup> - animating lists with v-for, the -move class for shifting elements
Library Integration - custom class names for Animate.css, GSAP through JS hooks
Route Transitions - smooth page transitions with <RouterView>
Appear - animation on first render, staggered loading
Accessibility - respecting prefers-reduced-motion

Project Requirements

Build an Animated NOVA LAB Station Dashboard with the following elements:

1. Control Panel with Fade Animation

A main panel that can be shown/hidden with a button. Use <Transition name="fade"> with v-if.

2. View Switching with out-in Mode

Inside the panel, implement tabs (e.g., "Status" and "Alerts"). Switching between them should use <Transition name="slide" mode="out-in"> with a dynamic :key.

3. Alert List with TransitionGroup

In the "Alerts" tab, display a list of alerts with the ability to add and remove items. Use <TransitionGroup name="list"> with enter, leave, and move classes.

4. Staggered Loading of Elements on Mount

The station modules list should appear in a cascading fashion when the application loads. Use <TransitionGroup appear :css="false"> with JS hooks and delay based on index.

5. Accessibility

Add support for prefers-reduced-motion - users who don't want animations should see instant changes without transitions.

Architecture

1App.vue
2├── Toggle Button (show/hide panel)
3├── Control panel (Transition name="fade")
4│   ├── Tabs (status / alerts)
5│   │   └── Transition name="slide" mode="out-in"
6│   │       ├── Status view
7│   │       │   └── System metrics display
8│   │       └── Alerts view
9│   │           ├── Add alert button
10│   │           └── TransitionGroup name="list"
11│   │               └── Alert items (add/remove)
12│   └── System modules list (TransitionGroup appear :css="false")
13│       └── Staggered items (delay based on index)

Key Patterns to Apply

Nested Transitions - fade on the panel, slide on the tabs, list on the alerts
Multiple techniques in one project - CSS transitions (fade, slide), CSS move (list), JS hooks (stagger)
TransitionGroup with move - adding an alert at the beginning of the list causes the rest to smoothly shift
Appear with stagger - cascading module loading creates the effect of "station systems powering up"
The done() callback - in JS hooks, remember to call done() after the animation finishes

Try extending the project with additional effects - for example, a bounce animation for critical alerts or a pulse effect for active modules!

Code for this lesson: App.vue

1<script setup>
2import { ref } from 'vue'
3
4const showPanel = ref(false)
5const alerts = ref([
6  { id: 1, text: 'System life support: OK', type: 'success' },
7  { id: 2, text: 'Oxygen level: 21%', type: 'info' }
8])
9const currentView = ref('status')
10let alertId = 3
11
12function addAlert() {
13  const texts = [
14    'Temperature anomaly detected',
15    'Solar panel efficiency: 87%',
16    'Comm relay signal strong',
17    'Water recycler maintenance due'
18  ]
19  alerts.value.push({
20    id: alertId++,
21    text: texts[Math.floor(Math.random() * texts.length)],
22    type: Math.random() > 0.5 ? 'info' : 'success'
23  })
24}
25
26function removeAlert(id) {
27  alerts.value = alerts.value.filter(a => a.id !== id)
28}
29</script>
30
31<template>
32  <div class="nova-lab">
33    <h1>NOVA LAB - Animation System (Project)</h1>
34
35    <!-- Panel toggle z fade transition -->
36    <button @click="showPanel = !showPanel" class="btn primary">
37      {{ showPanel ? 'Close' : 'Open' }} control panel
38    </button>
39
40    <Transition name="fade">
41      <div v-if="showPanel" class="control-panel">
42        <h2>Control Panel</h2>
43
44        <!-- View switcher z slide + out-in -->
45        <div class="tabs">
46          <button @click="currentView = 'status'" :class="{active: currentView === 'status'}">Status</button>
47          <button @click="currentView = 'alerts'" :class="{active: currentView === 'alerts'}">Alerts</button>
48        </div>
49
50        <Transition name="slide" mode="out-in">
51          <div v-if="currentView === 'status'" key="status" class="view">
52            <p>All systems operational</p>
53          </div>
54          <div v-else key="alerts" class="view">
55            <button @click="addAlert" class="btn small">+ Alert</button>
56            <TransitionGroup name="list" tag="div">
57              <div v-for="alert in alerts" :key="alert.id" :class="['alert', alert.type]">
58                {{ alert.text }}
59                <button @click="removeAlert(alert.id)" class="close">×</button>
60              </div>
61            </TransitionGroup>
62          </div>
63        </Transition>
64      </div>
65    </Transition>
66  </div>
67</template>
68
69<style scoped>
70.nova-lab {
71  background: #0a0e27;
72  color: #00ff88;
73  min-height: 100vh;
74  padding: 20px;
75  font-family: monospace;
76}
77h1, h2 { color: #00ff88; }
78.btn { border: none; padding: 10px 16px; border-radius: 8px; cursor: pointer; color: white; }
79.primary { background: #00b4d8; margin-bottom: 15px; }
80.small { background: #9b59b6; font-size: 12px; padding: 6px 12px; margin-bottom: 10px; }
81
82.control-panel {
83  background: rgba(0, 180, 216, 0.05);
84  border: 2px solid #00b4d8;
85  padding: 20px;
86  border-radius: 12px;
87}
88.tabs { display: flex; gap: 8px; margin: 10px 0; }
89.tabs button {
90  background: rgba(0,180,216,0.1);
91  color: #00b4d8;
92  border: 1px solid #00b4d8;
93  padding: 6px 14px;
94  border-radius: 6px;
95  cursor: pointer;
96}
97.tabs button.active { background: #00b4d8; color: white; }
98
99.view { min-height: 100px; }
100.alert {
101  display: flex;
102  justify-content: space-between;
103  align-items: center;
104  padding: 10px 14px;
105  margin: 6px 0;
106  border-radius: 6px;
107}
108.alert.success { background: rgba(0,255,136,0.1); border: 1px solid #00ff88; }
109.alert.info { background: rgba(0,180,216,0.1); border: 1px solid #00b4d8; }
110.close { background: transparent; border: none; color: #e74c3c; cursor: pointer; font-size: 16px; }
111
112/* Fade */
113.fade-enter-active, .fade-leave-active { transition: opacity 0.4s ease; }
114.fade-enter-from, .fade-leave-to { opacity: 0; }
115
116/* Slide */
117.slide-enter-active, .slide-leave-active { transition: all 0.3s ease; }
118.slide-enter-from { opacity: 0; transform: translateX(20px); }
119.slide-leave-to { opacity: 0; transform: translateX(-20px); }
120
121/* List */
122.list-enter-active, .list-leave-active { transition: all 0.3s ease; }
123.list-enter-from, .list-leave-to { opacity: 0; transform: translateX(30px); }
124.list-move { transition: transform 0.3s ease; }
125.list-leave-active { position: absolute; }
126</style>

Spotted a mistake in this lesson?