Enter and leave animations in Angular - Step-by-Step Execution

Concept Flow - Enter and leave animations

Component loads

↓

Element added to DOM

↓

Trigger enter animation

↓

Animation runs

↓

Animation ends

↓

Element visible

↓

Trigger leave animation

↓

Animation runs

↓

Animation ends

↓

Element removed from DOM

When an element appears, Angular triggers an enter animation before showing it. When it disappears, Angular triggers a leave animation before removing it from the DOM.

Execution Sample

Angular

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

@Component({
  selector: 'app-fade',
  template: `<div *ngIf="isVisible" @fade>Fade me in and out</div>`,
  animations: [
    trigger('fade', [
      transition(':enter', [style({opacity: 0}), animate('500ms', style({opacity: 1}))]),
      transition(':leave', [animate('500ms', style({opacity: 0}))])
    ])
  ]
})
export class FadeComponent {
  isVisible = true;
}

Defines a fade animation that runs when an element enters or leaves the DOM.

Execution Table

Step	Trigger	Animation State	Action	Element Visibility
1	Component loads	No animation	Element not in DOM	Hidden
2	Element added	Enter animation starts	Opacity from 0 to 1 over 500ms	Fading in
3	After 500ms	Enter animation ends	Element fully visible	Visible
4	Element removed	Leave animation starts	Opacity from 1 to 0 over 500ms	Fading out
5	After 500ms	Leave animation ends	Element removed from DOM	Hidden

💡 Element is removed from DOM after leave animation finishes

Variable Tracker

Variable	Start	After Step 2	After Step 3	After Step 4	After Step 5
elementOpacity	N/A	0 -> animating to 1	1	1 -> animating to 0	N/A (removed)
elementInDOM	false	true	true	true	false

Key Moments - 3 Insights

Why does the element stay visible after the enter animation ends?

Because after the enter animation finishes (step 3), the element's opacity is fully 1 and it remains in the DOM visible as shown in the execution_table.

When exactly is the element removed from the DOM?

The element is removed only after the leave animation completes (step 5), not immediately when the element is removed from the template (step 4).

What happens if the animation duration is changed?

The animation runs for the new duration, so the fading in or out takes longer or shorter, reflected in the timing between steps 2-3 or 4-5 in the execution_table.

Visual Quiz - 3 Questions

Look at the execution_table, what is the elementOpacity value after step 3?

A Animating from 0 to 1

B 0

C 1

D Animating from 1 to 0

💡 Hint

Check the 'elementOpacity' row in variable_tracker after step 3

At which step does the element get removed from the DOM?

A Step 5

B Step 2

C Step 4

D Step 3

💡 Hint

Look at the 'elementInDOM' variable in variable_tracker and the 'Action' column in execution_table

If the enter animation duration is increased, how does it affect the execution_table?

A Leave animation runs longer

B Step 3 happens later, enter animation runs longer

C Step 2 is skipped

D Element is removed earlier

💡 Hint

Refer to the timing between steps 2 and 3 in execution_table

Concept Snapshot

Angular enter and leave animations:
- Use trigger() with :enter and :leave transitions
- :enter runs when element is added to DOM
- :leave runs before element is removed
- Animations run before visibility changes
- Element removed only after leave animation ends

Full Transcript

This visual execution shows how Angular handles enter and leave animations. When a component loads and an element is added, Angular triggers the enter animation, gradually changing opacity from 0 to 1 over 500 milliseconds. The element becomes fully visible after the animation ends. When the element is removed, Angular triggers the leave animation, fading opacity from 1 to 0 over 500 milliseconds before removing the element from the DOM. Variables like elementOpacity and elementInDOM track the element's state through these steps. Key moments include understanding that the element stays visible after enter animation ends and is only removed after leave animation finishes. Changing animation duration affects how long these transitions take. The quizzes test understanding of opacity values, removal timing, and animation duration effects.

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