What is Enter and leave animations in Angular?

Angularframework~5 mins

Enter and leave animations in Angular

Choose your learning style10 modes available

Learn Why Deep Visual Try Challenge Project Recall Perf

Start learning this pattern below

Jump into concepts and practice - no test required

Recommended

Test this pattern10 questions across easy, medium, and hard to know if this pattern is strong

Introduction

Enter and leave animations make elements appear and disappear smoothly. They help users notice changes on the page without sudden jumps.

Showing a message box that fades in and out

Adding items to a list with a slide effect

Removing elements with a fade or shrink effect

Highlighting new content when it appears

Making modal dialogs open and close gently

Syntax

Angular

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

@Component({
  selector: 'app-example',
  templateUrl: './example.component.html',
  animations: [
    trigger('fadeInOut', [
      transition(':enter', [
        style({ opacity: 0 }),
        animate('300ms ease-in', style({ opacity: 1 }))
      ]),
      transition(':leave', [
        animate('300ms ease-out', style({ opacity: 0 }))
      ])
    ])
  ]
})
export class ExampleComponent {}

:enter means when the element is added to the DOM.

:leave means when the element is removed from the DOM.

Examples

This example slides the element in from the left and slides it out to the right.

Angular

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

This example makes the element grow when it appears and shrink when it disappears.

Angular

trigger('growShrink', [
  transition(':enter', [
    style({ transform: 'scale(0)' }),
    animate('200ms ease-out', style({ transform: 'scale(1)' }))
  ]),
  transition(':leave', [
    animate('200ms ease-in', style({ transform: 'scale(0)' }))
  ])
])

Sample Program

This Angular component shows a green box that fades in when you click the button and fades out when you click again. The @fadeInOut animation triggers on the box's enter and leave events.

The button toggles the box's visibility using *ngIf. The animation smoothly changes the box's opacity.

ARIA live region aria-live="polite" helps screen readers announce the box's appearance.

Angular

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

@Component({
  selector: 'app-fade-example',
  template: `
    <button (click)="show = !show">Toggle Box</button>
    <div *ngIf="show" @fadeInOut class="box" aria-live="polite">
      Hello! I fade in and out.
    </div>
  `,
  styles: [
    `.box { width: 200px; height: 100px; background-color: #4caf50; color: white; display: flex; align-items: center; justify-content: center; margin-top: 1rem; border-radius: 0.5rem; }`
  ],
  animations: [
    trigger('fadeInOut', [
      transition(':enter', [
        style({ opacity: 0 }),
        animate('500ms ease-in', style({ opacity: 1 }))
      ]),
      transition(':leave', [
        animate('500ms ease-out', style({ opacity: 0 }))
      ])
    ])
  ]
})
export class FadeExampleComponent {
  show = false;
}

OutputSuccess

Important Notes

Always use *ngIf or structural directives to trigger enter and leave animations.

Use aria-live attributes to improve accessibility for dynamic content.

Test animations on different devices to ensure smooth performance.

Summary

Enter and leave animations make elements appear and disappear smoothly.

Use :enter and :leave in Angular animations to define these effects.

Animations improve user experience by showing changes gently and accessibly.

Practice

(1/5)

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.

Enter and leave animations in Angular

Start learning this pattern below

Practice

Solution

Step 1: Understand Angular animation states

Step 2: Identify their purpose

Final Answer:

Quick Check:

Solution

Step 1: Recall Angular animation syntax

Step 2: Check each option

Final Answer:

Quick Check:

Solution

Step 1: Analyze the :leave transition

Step 2: Understand the effect on removal

Final Answer:

Quick Check:

Solution

Step 1: Review :enter transition

Step 2: Check :leave transition

Final Answer:

Quick Check:

Solution

Step 1: Check :enter animation for fade in

Step 2: Check :leave animation for slide out left

Step 3: Verify other options

Final Answer:

Quick Check: