Trigger and state definitions in Angular - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to define a trigger that starts on component load.

Angular

trigger('fadeIn', [
  transition(':[1]', [
    style({ opacity: 0 }),
    animate('500ms', style({ opacity: 1 }))
  ])
])

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

Aenter

Bleave

Cvoid

Dstart

Attempts:

3 left

💡 Hint

Common Mistakes

Using ':leave' instead of ':enter' causes the animation to trigger on exit.

Using ':void' is incorrect here because it represents a non-existing state.

The enter state triggers when the component loads or enters the view.

2fill in blank

medium

Complete the code to define a state named 'open' with full opacity.

Angular

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

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

A0

B1

C0.5

D100

Attempts:

3 left

💡 Hint

Common Mistakes

Using 0 makes the element invisible.

Using 100 is invalid for opacity in CSS.

The opacity value 1 means fully visible.

3fill in blank

hard

Fix the error in the transition definition to animate between 'open' and 'closed' states.

Angular

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

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

Aopen

Bclosed

Copen => closed

Dclosed => open

Attempts:

3 left

💡 Hint

Common Mistakes

Including arrows inside the blanks causes syntax errors.

Using the same state name twice does not animate between states.

The <=> operator is used between two states as a string, so each blank should be the state name without extra symbols.

4fill in blank

hard

Fill both blanks to create a trigger with states 'open' and 'closed' and animate between them.

Angular

trigger('toggle', [
  state('[1]', style({ height: '200px' })),
  state('[2]', style({ height: '100px' })),
  transition('[1] <=> [2]', animate('400ms ease'))
])

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

Aopen

Bclosed

Cactive

Dinactive

Attempts:

3 left

💡 Hint

Common Mistakes

Using unrelated state names like 'active' and 'inactive' may confuse the animation logic.

Mixing up the order of states in the transition string.

The states open and closed are commonly used to represent expanded and collapsed views.

5fill in blank

hard

Fill all three blanks to define a trigger with states 'visible' and 'hidden' and animate opacity changes.

Angular

trigger('visibility', [
  state('[1]', style({ opacity: 1 })),
  state('[2]', style({ opacity: 0 })),
  transition('[1] <=> [2]', animate('[3]'))
])

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

Avisible

Bhidden

C500ms ease-in

D300ms linear

Attempts:

3 left

💡 Hint

Common Mistakes

Swapping opacity values for states causes unexpected visibility.

Using inconsistent animation durations or easing.

The states visible and hidden represent opacity 1 and 0 respectively. The animation duration and easing is set to 300ms linear for smooth transition.