Transition between states in Angular - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import the Angular animation trigger function.

Angular

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

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

Aanimate

Btrigger

Cstate

Dstyle

Attempts:

3 left

💡 Hint

Common Mistakes

Importing 'animate' instead of 'trigger' here.

Using 'state' which defines animation states, not triggers.

The trigger function is used to define animation triggers in Angular.

2fill in blank

medium

Complete the code to define a simple fade-in animation state.

Angular

state('visible', style({ opacity: [1] })),

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

A1

B2

C0

D0.5

Attempts:

3 left

💡 Hint

Common Mistakes

Using 0 which means fully transparent.

Using values greater than 1 which are invalid.

The opacity value 1 means fully visible.

3fill in blank

hard

Fix the error in the animation transition syntax.

Angular

transition('hidden => visible', [1]('500ms ease-in')),

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

Astate

Bstyle

Ctrigger

Danimate

Attempts:

3 left

💡 Hint

Common Mistakes

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

Using 'style' which defines styles, not timing.

The animate function defines the timing and easing of the transition.

4fill in blank

hard

Fill both blanks to create a transition from 'void' to 'visible' with a 300ms fade-in.

Angular

transition('[1] => [2]', animate('300ms ease-in'))

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

Avoid

Bvisible

Chidden

Dfade

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'hidden' instead of 'void' for the starting state.

Using 'fade' which is not a defined state.

The transition from 'void' to 'visible' defines the animation when the element enters the view.

5fill in blank

hard

Fill all three blanks to define a trigger named 'fadeTrigger' with states 'hidden' and 'visible' and a transition between them.

Angular

trigger('[1]', [
  state('hidden', style({ opacity: 0 })),
  state('[2]', style({ opacity: 1 })),
  transition('[3] => visible', animate('400ms ease-out'))
])

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

AfadeTrigger

Bvisible

Chidden

Dvoid

Attempts:

3 left

💡 Hint

Common Mistakes

Mixing up the state names in the transition.

Using 'void' instead of 'hidden' in the transition.

The trigger is named 'fadeTrigger'. It has states 'hidden' and 'visible'. The transition is from 'hidden' to 'visible'.