Project: NOVA LAB Animation System

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

1. Nested Transitions — fade on the panel, slide on the tabs, list on the alerts
2. Multiple techniques in one project — CSS transitions (fade, slide), CSS move (list), JS hooks (stagger)
3. TransitionGroup with move — adding an alert at the beginning of the list causes the rest to smoothly shift
4. Appear with stagger — cascading module loading creates the effect of "station systems powering up"
5. 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!