Keyframe animations in Angular - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import the animation functions from Angular.

Angular

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

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

Astate

Bstyle

Canimate

Dtransition

Attempts:

3 left

💡 Hint

Common Mistakes

Choosing 'state' which defines animation states, not timing.

Choosing 'style' which defines CSS styles, not timing.

The animate function is used to define the timing and styles of the animation steps.

2fill in blank

medium

Complete the code to define a keyframe animation inside the animate function.

Angular

animate('1s ease-in', [1]([style({ opacity: 0 }), style({ opacity: 1 })]))

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

Akeyframes

Bsequence

Cstate

Dgroup

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'sequence' which runs animations one after another, not keyframes.

Using 'group' which runs animations in parallel, not keyframes.

The keyframes function allows defining multiple style steps in an animation.

3fill in blank

hard

Fix the error in the animation trigger by completing the missing transition function.

Angular

trigger('fadeIn', [transition('[1]', [animate('500ms ease-in')])])

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

A'void => void'

B'* => void'

C'* => *'

D'void => *'

Attempts:

3 left

💡 Hint

Common Mistakes

Using '* => void' which is for leaving animations.

Using '* => *' which triggers on any state change.

The transition 'void => *' means the animation runs when the element enters the view.

4fill in blank

hard

Fill both blanks to create a keyframe animation that moves an element from left to right and fades in.

Angular

animate('2s ease-out', keyframes([style({ transform: 'translateX([1])', opacity: 0 }), style({ transform: 'translateX([2])', opacity: 1 })]))

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

A'-100px'

B'0px'

C'100px'

D'50px'

Attempts:

3 left

💡 Hint

Common Mistakes

Using positive values for the start position.

Using zero for both positions which causes no movement.

The element starts 100px left ('-100px') and moves to 100px right ('100px') while fading in.

5fill in blank

hard

Fill all three blanks to create a trigger with two states and a transition that animates between them.

Angular

trigger('openClose', [state('open', style({ height: [1], opacity: [2] })), state('closed', style({ height: [3], opacity: 0 })), transition('open <=> closed', animate('300ms ease-in-out'))])

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

A'200px'

B'1'

C'0px'

D'100px'

Attempts:

3 left

💡 Hint

Common Mistakes

Using zero height for the open state.

Using opacity 0 for the open state.

The 'open' state has height '200px' and full opacity '1'. The 'closed' state has height '0px' and opacity 0.