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

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

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

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

Hint

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

Practice

1. What do :enter and :leave states represent in Angular animations?

easy

A. They define animations for when elements appear and disappear.

B. They control the timing of all animations globally.

C. They are used to pause and resume animations.

D. They specify styles for static elements only.

Solution

1. Step 1: Understand Angular animation states

   The :enter state triggers when an element is added to the DOM, and :leave triggers when it is removed.

2. Step 2: Identify their purpose

   These states allow defining animations specifically for elements appearing or disappearing, making transitions smooth.

3. Final Answer:

   They define animations for when elements appear and disappear. -> Option A

4. Quick Check:

   :enter and :leave = animations for appear/disappear [OK]

Hint: Remember :enter = appear, :leave = disappear animations [OK]

Common Mistakes:

• Thinking :enter and :leave control global animation timing
• Confusing :enter/:leave with pausing animations
• Assuming they apply only to static elements

2. Which of the following is the correct syntax to define an enter animation trigger in Angular?

easy

A. trigger('fadeIn', [transition('enter', [animate('500ms')])])

B. trigger('fadeIn', [state(':enter', style({opacity: 1}))])

C. trigger('fadeIn', [animate(':enter', style({opacity: 1}))])

D. trigger('fadeIn', [transition(':enter', [style({opacity: 0}), animate('500ms', style({opacity: 1}))])])

Solution

1. Step 1: Recall Angular animation syntax

   Enter animations use transition(':enter', [...]) inside a trigger with defined styles and animate calls.

2. Step 2: Check each option

   trigger('fadeIn', [transition(':enter', [style({opacity: 0}), animate('500ms', style({opacity: 1}))])]) correctly uses transition(':enter', [style(...), animate(...)]). The distractors misuse state, animate directly, or wrong transition name.

3. Final Answer:

   trigger('fadeIn', [transition(':enter', [style({opacity: 0}), animate('500ms', style({opacity: 1}))])]) -> Option D

4. Quick Check:

   Use transition(':enter', [...]) inside trigger [OK]

Hint: Use transition(':enter', [...]) inside trigger for enter animations [OK]

Common Mistakes:

• Using state() instead of transition() for :enter
• Writing 'enter' without colon in transition
• Calling animate() outside transition

3. Given this Angular animation trigger:

trigger('slideInOut', [
  transition(':enter', [style({transform: 'translateX(-100%)'}), animate('300ms ease-out', style({transform: 'translateX(0%)'}))]),
  transition(':leave', [animate('300ms ease-in', style({transform: 'translateX(100%)'}))])
])

What happens when an element with this trigger is removed from the DOM?

medium

A. It instantly disappears without animation.

B. It slides in from the left over 300ms.

C. It slides out to the right over 300ms.

D. It slides out to the left over 300ms.

Solution

1. Step 1: Analyze the :leave transition

   The :leave transition animates the element with animate('300ms ease-in', style({transform: 'translateX(100%)'})), moving it to the right (100%).

2. Step 2: Understand the effect on removal

   When the element is removed, it slides out to the right over 300 milliseconds before disappearing.

3. Final Answer:

   It slides out to the right over 300ms. -> Option C

4. Quick Check:

   :leave moves element right = slides out right [OK]

Hint: Check :leave style transform direction for exit animation [OK]

Common Mistakes:

• Confusing :enter and :leave animations
• Assuming instant disappearance without animation
• Mixing left and right directions

4. Identify the error in this Angular animation trigger code:

trigger('fade', [
  transition(':enter', [animate('500ms', style({opacity: 1}))]),
  transition(':leave', [style({opacity: 1}), animate('500ms', style({opacity: 0}))])
])

medium

A. Missing initial style for :enter transition.

B. Incorrect use of animate() inside transition.

C. Using style() after animate() in :leave transition.

D. No error; code is correct.

Solution

1. Step 1: Review :enter transition

   The :enter transition animates from current style to opacity 1 but lacks an initial style with opacity 0, so it jumps instead of fading in.

2. Step 2: Check :leave transition

   The :leave transition correctly starts at opacity 1 and animates to opacity 0.

3. Final Answer:

   Missing initial style for :enter transition. -> Option A

4. Quick Check:

   :enter needs starting style for smooth fade [OK]

Hint: Always set initial style before animate() in :enter [OK]

Common Mistakes:

• Omitting initial style in :enter causes jump
• Thinking animate() usage is wrong here
• Confusing order of style() and animate()

5. You want to create an Angular animation that fades an element in when it appears and slides it out to the left when it disappears. Which trigger definition correctly combines these enter and leave animations?

hard

A. trigger('fadeSlide', [transition(':enter', [animate('400ms', style({opacity: 1}))]), transition(':leave', [style({transform: 'translateX(-100%)'}), animate('400ms')])])

B. trigger('fadeSlide', [transition(':enter', [style({opacity: 0}), animate('400ms', style({opacity: 1}))]), transition(':leave', [animate('400ms', style({transform: 'translateX(-100%)'}))])])

C. trigger('fadeSlide', [transition(':enter', [style({opacity: 1}), animate('400ms', style({opacity: 0}))]), transition(':leave', [animate('400ms', style({transform: 'translateX(100%)'}))])])

D. trigger('fadeSlide', [transition(':enter', [style({opacity: 0}), animate('400ms', style({opacity: 1}))]), transition(':leave', [animate('400ms', style({transform: 'translateX(100%)'}))])])

Solution

1. Step 1: Check :enter animation for fade in

   transition(':enter', [style({opacity: 0}), animate('400ms', style({opacity: 1}))]) correctly fades in from opacity 0 to 1.

2. Step 2: Check :leave animation for slide out left

   transition(':leave', [animate('400ms', style({transform: 'translateX(-100%)'}))]) slides the element to the left.

3. Step 3: Verify other options

   Distractors fail by missing initial opacity 0 (no fade-in), reversing fade direction, using wrong slide direction (+100% right), or incomplete animate call.

4. Final Answer:

   trigger('fadeSlide', [transition(':enter', [style({opacity: 0}), animate('400ms', style({opacity: 1}))]), transition(':leave', [animate('400ms', style({transform: 'translateX(-100%)'}))])]) -> Option B

5. Quick Check:

   Fade in opacity 0->1, slide out left translateX(-100%) [OK]

Hint: Fade in needs opacity 0 start; slide left uses translateX(-100%) [OK]

Common Mistakes:

• Forgetting initial opacity 0 on enter
• Using translateX(100%) instead of -100% for left slide
• Reversing fade directions