[Solved] Why does this animation not run?trigger('zoom', [ state('small', style({ transform: 'scale(1)' })), state('large', style({ transform: 'scale(1.... | Angular

Angular - Animations

Why does this animation not run?

trigger('zoom', [
  state('small', style({ transform: 'scale(1)' })),
  state('large', style({ transform: 'scale(1.5)' })),
  transition('small <=> large', [animate('300ms')])
])

Component code toggles state between 'small' and 'large' but animation is instant.

ABrowser does not support CSS transform animations

BMissing <code>animations</code> array in component decorator

CTransition syntax '<=>' is invalid

DAnimate duration must be longer than 500ms

Step-by-Step Solution

Solution:

Step 1: Check transition syntax
The '<=>' syntax is valid for two-way transitions in Angular animations.
Step 2: Verify component setup
If the animations array is missing in the component decorator, Angular won't run animations.
Final Answer:
Missing animations array in component decorator -> Option B
Quick Check:
Animations must be declared in component metadata [OK]

Quick Trick: Always add animations array in component decorator [OK]

Common Mistakes:

Assuming browser lacks support
Misreading transition syntax
Thinking duration must be longer

Master "Animations" in Angular

9 interactive learning modes - each teaches the same concept differently

Learn Why Deep Visual Try Challenge Project Recall Perf

More Angular Quizzes

Why does this animation not run?

Step 1: Check transition syntax

Step 2: Verify component setup

Final Answer:

Quick Check:

Want More Practice?