Enter and leave animations in Angular - Mini Project: Build & Apply

Enter and Leave Animations in Angular

📖 Scenario: You are building a simple Angular app where items can be added and removed from a list. To make the app look smooth and friendly, you want to add animations that show items fading in when they appear and fading out when they disappear.

🎯 Goal: Create an Angular component that displays a list of items with enter and leave animations. When an item is added, it should fade in. When an item is removed, it should fade out.

📋 What You'll Learn

Create an Angular component with a list of items

Add a configuration variable to control animation timing

Use Angular's animation functions to define fade in and fade out animations

Apply the animations to the list items so they animate on enter and leave

💡 Why This Matters

🌍 Real World

Animations make user interfaces feel smooth and polished. Many apps use enter and leave animations to show changes clearly and pleasantly.

💼 Career

Understanding Angular animations is useful for frontend developer roles where user experience and interface polish are important.

1

Set up the initial list of items

Create an Angular component with a property called items that is an array containing these exact strings: 'Apple', 'Banana', and 'Cherry'.

Angular

items = []
// Your code here

Need a hint?

Use a simple array with the exact strings inside square brackets.

2

Add animation timing configuration

Add a variable called animationDuration and set it to the string '300ms' to control the animation speed.

Angular

items = ['Apple', 'Banana', 'Cherry']
// Your code here

Need a hint?

This string will be used to set how long the fade animations last.

3

Define fade in and fade out animations

Import Angular animation functions and create a constant called fadeAnimation using trigger with the name 'fade'. Define transition for ':enter' that animates opacity from 0 to 1 over animationDuration, and for ':leave' that animates opacity from 1 to 0 over animationDuration.

Angular

items = ['Apple', 'Banana', 'Cherry']
animationDuration = '300ms'
// Your code here

Need a hint?

Use trigger, transition, style, and animate from @angular/animations to create fade animations.

4

Apply the fade animation to the list items

In the component template, add an *ngFor to display each item in items inside a <li>. Add the @fade animation trigger to each <li> element to enable the fade in and fade out animations.

Angular

import { trigger, transition, style, animate } from '@angular/animations';

items = ['Apple', 'Banana', 'Cherry']
animationDuration = '300ms'

fadeAnimation = trigger('fade', [
  transition(':enter', [
    style({ opacity: 0 }),
    animate(animationDuration, style({ opacity: 1 }))
  ]),
  transition(':leave', [
    animate(animationDuration, style({ opacity: 0 }))
  ])
])

// Add the @fade animation trigger to each  in the template
// Your code here

Need a hint?

Use *ngFor to loop over items and add [@fade] to each <li>.