Angular - Animations
You want to create an animation that moves an element from left to right over 2 seconds, then fades it out over 1 second. Which of these animation sequences correctly uses
animate for timing?You want to create an animation that moves an element from left to right over 2 seconds, then fades it out over 1 second. Which of these animation sequences correctly uses animate for timing?
hard📝 Application Q15 of 15
Step-by-Step Solution
Solution:
Step 1: Understand the animation steps
The element should first move horizontally over 2 seconds, then fade out over 1 second.Step 2: Analyze each option's sequence
animate('2s', style({ transform: 'translateX(100px)' })), animate('1s', style({ opacity: 0 })) correctly animates transform first, then opacity to 0. animate('2s', style({ opacity: 0 })), animate('1s', style({ transform: 'translateX(100px)' })) reverses the order. animate('3s', style({ transform: 'translateX(100px)', opacity: 0 })) combines both in 3 seconds, losing step separation. animate('2s', style({ transform: 'translateX(100px)', opacity: 0 })), animate('1s', style({ opacity: 1 })) fades out and then fades in, which is incorrect.Final Answer:
animate('2s', style({ transform: 'translateX(100px)' })), animate('1s', style({ opacity: 0 })) -> Option DQuick Check:
Separate animate calls for move then fade = D [OK]
Quick Trick: Chain animate calls for sequential timing [OK]
Common Mistakes:
- Combining unrelated style changes in one animate
- Reversing animation order
- Using wrong opacity values
Master "Animations" in Angular
Want More Practice?
15+ quiz questions · All difficulty levels · Free
Free Signup - Practice All QuestionsMore Angular Quizzes