Enter and leave animations in Angular - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import the animation trigger function.

Angular

import { [1] } from '@angular/animations';

Drag options to blanks, or click blank then click option'

Astyle

Banimate

Ctrigger

Dstate

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'animate' instead of 'trigger' in the import.

Confusing 'style' with the trigger function.

The trigger function defines an animation trigger in Angular.

2fill in blank

medium

Complete the code to define an enter animation using opacity.

Angular

transition(':enter', [style({ opacity: 0 }), [1]('500ms ease-in', style({ opacity: 1 }))])

Drag options to blanks, or click blank then click option'

Akeyframes

Btrigger

Cstate

Danimate

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'trigger' inside the transition array.

Using 'state' instead of 'animate' for timing.

The animate function defines the timing and style changes for the animation.

3fill in blank

hard

Fix the error in the leave animation transition.

Angular

transition(':leave', [[1]('300ms ease-out', style({ opacity: 0 }))])

Drag options to blanks, or click blank then click option'

Aanimate

Btrigger

Cstyle

Dstate

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'trigger' instead of 'animate' inside transition.

Using 'style' alone without 'animate'.

The animate function is required to specify the animation timing and style changes.

4fill in blank

hard

Fill both blanks to create a fade in and fade out animation.

Angular

animations: [trigger('fade', [transition(':enter', [[1](0), [2]('400ms ease-in', style({ opacity: 1 }))]), transition(':leave', [[2]('400ms ease-out', style({ opacity: 0 }))])])]

Drag options to blanks, or click blank then click option'

Astyle

Banimate

Ctrigger

Dstate

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'animate' where 'style' is needed for initial styles.

Mixing up the order of 'style' and 'animate'.

style sets the initial or final styles, and animate defines the animation timing and transition.

5fill in blank

hard

Fill all three blanks to define a slide in and slide out animation.

Angular

animations: [trigger('slide', [transition(':enter', [[1]({ transform: 'translateX(-100%)' }), [2]('300ms ease-out', style({ transform: 'translateX(0)' }))]), transition(':leave', [[2]('300ms ease-in', style({ transform: 'translateX(-100%)' })), [3]('*')])])]

Drag options to blanks, or click blank then click option'

Astyle

Banimate

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'animate' where 'style' is needed for initial position.

Omitting the last style reset causing animation glitches.

Use style to set start/end positions and animate to define timing. The last blank resets styles instantly.