Keyframe animations in Angular - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What happens when this Angular animation triggers?

Consider this Angular animation trigger attached to a component:

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

What will the component do when it appears and disappears?

A The component stays fully visible without any fade effect on enter or leave.

B The component instantly appears fully visible and then fades out over 500ms when removed.

C The component fades in over 500ms but disappears instantly without animation when removed.

D The component fades in from transparent to fully visible over 500ms when added, and fades out to transparent over 500ms when removed.

💡 Hint

Look at the :enter and :leave transitions and their styles.

The :enter transition starts with opacity 0 and animates to opacity 1 over 500ms, creating a fade-in effect. The :leave transition animates opacity from current to 0 over 500ms, creating a fade-out effect.

📝 Syntax

intermediate

Which option correctly defines a keyframe animation in Angular?

Angular animations use the keyframes() function to define multiple steps. Which of these options is syntactically correct?

A

animate('1s', keyframes({
  0: style({ opacity: 0 }),
  1: style({ opacity: 1 })
}))

B

animate('1s', keyframes([
  style({ opacity: 0, offset: 0 }),
  style({ opacity: 1, offset: 1 })
]))

C

animate('1s', keyframes([
  { opacity: 0, offset: 0 },
  { opacity: 1, offset: 1 }
]))

D

animate('1s', keyframes(
  style({ opacity: 0 }),
  style({ opacity: 1 })
))

💡 Hint

Remember that keyframes() takes an array of style() calls with offset values.

Option B correctly uses an array of style() objects with offset properties inside keyframes(). Other options misuse object syntax or omit offset.

🔧 Debug

advanced

Why does this Angular animation not run on component enter?

Given this animation trigger:

trigger('slideIn', [
  transition('void => *', [
    animate('300ms ease-in', keyframes([
      style({ transform: 'translateX(-100%)', offset: 0 }),
      style({ transform: 'translateX(0)', offset: 1 })
    ]))
  ])
])

The animation does not run when the component appears. What is the likely cause?

A The component is not using the animation trigger name 'slideIn' in its template, so the animation never starts.

B The transition state 'void => *' is correct, so the problem is elsewhere.

C The keyframes are missing the 'opacity' style, so the animation is ignored.

D The animate duration '300ms' is too short to see any effect.

💡 Hint

Check if the animation trigger is properly attached to the component's template.

If the animation trigger name is not used in the component's template (e.g., @slideIn on an element), Angular will not run the animation even if the trigger is defined.

❓ state_output

advanced

What is the final style of the element after this animation completes?

Consider this Angular animation:

trigger('colorChange', [
  transition('* => *', [
    animate('1s', keyframes([
      style({ backgroundColor: 'red', offset: 0 }),
      style({ backgroundColor: 'blue', offset: 0.5 }),
      style({ backgroundColor: 'green', offset: 1 })
    ]))
  ])
])

After the animation finishes, what background color will the element have?

A Red

B Blue

C Green

D No background color (transparent)

💡 Hint

The last keyframe defines the final style after animation.

The animation ends at offset 1 with backgroundColor 'green', so the element's background color will be green after the animation.

🧠 Conceptual

expert

Why use keyframe animations instead of simple style transitions in Angular?

Angular animations allow both simple style transitions and keyframe animations. Which reason best explains why you would choose keyframes?

A Keyframes allow defining multiple intermediate steps with different styles and timings, enabling complex animations.

B Keyframes run faster than simple style transitions because they use less CPU.

C Keyframes automatically handle browser compatibility issues without extra code.

D Keyframes are easier to write and require less code than simple style transitions.

💡 Hint

Think about the flexibility keyframes provide compared to a start and end style.

Keyframes let you specify multiple style changes at different points in time, allowing more detailed and complex animations than simple start-to-end transitions.