Bird
0
0

Identify the error in this Angular route animation code snippet:

medium📝 Debug Q14 of 15
Angular - Animations
Identify the error in this Angular route animation code snippet:
@Component({
  animations: [
    trigger('routeAnimations', [
      transition('HomePage => AboutPage', [
        animate('500ms ease-in')
      ])
    ])
  ]
})
export class AppComponent {}
Atransition syntax requires '*' wildcard instead of page names
BIncorrect trigger name, should be 'routeAnimation' singular
Canimate() duration must be in seconds, not milliseconds
DMissing style() before animate() in transition
Step-by-Step Solution
Solution:
  1. Step 1: Check animation steps in transition

    Angular animations usually start with style() to set initial state before animate().
  2. Step 2: Confirm if style() is required

    Without style(), Angular animates from current state, which may cause unexpected behavior.
  3. Final Answer:

    Missing style() before animate() in transition -> Option D
  4. Quick Check:

    Animations need style() before animate() [OK]
Quick Trick: Always start transition with style() before animate() [OK]
Common Mistakes:
  • Skipping style() causes animation issues
  • Confusing trigger naming conventions
  • Wrong time units in animate()

Want More Practice?

15+ quiz questions · All difficulty levels · Free

Free Signup - Practice All Questions
More Angular Quizzes