Bird
0
0

You defined this animation trigger:

medium📝 Debug Q6 of 15
Angular - Animations
You defined this animation trigger:
trigger('routeAnimations', [transition('* <=> *', [animate('300ms ease-in', style({ opacity: 1 }))])])

The animation does not start when navigating between routes. What is the most probable reason?
AThe initial style is missing, so the animation has no starting point
BThe transition syntax '* <=> *' is invalid
CThe animate function duration must be longer than 500ms
DThe trigger name must match the component selector
Step-by-Step Solution
Solution:
  1. Step 1: Check animation steps

    The animation only defines the end style (opacity: 1) but no initial style is set.
  2. Step 2: Understand animation flow

    Without an initial style, Angular does not know what to animate from, so the animation won't run.
  3. Final Answer:

    The initial style is missing, so the animation has no starting point -> Option A
  4. Quick Check:

    Always define starting styles before animate() [OK]
Quick Trick: Always set initial style before animate() [OK]
Common Mistakes:
  • Assuming animate() alone defines start and end styles
  • Using invalid transition syntax
  • Mismatching trigger names

Want More Practice?

15+ quiz questions · All difficulty levels · Free

Free Signup - Practice All Questions
More Angular Quizzes