Angular - Animations
How can you combine enter and leave animations to create a fade and scale effect where the element fades in and grows on enter, and fades out and shrinks on leave?
How can you combine enter and leave animations to create a fade and scale effect where the element fades in and grows on enter, and fades out and shrinks on leave?
hard📝 component behavior Q9 of 15
Step-by-Step Solution
Solution:
Step 1: Define enter animation
Start with opacity 0 and scale 0.5, animate to opacity 1 and scale 1.Step 2: Define leave animation
Animate from current to opacity 0 and scale 0.5.Step 3: Verify option correctness
Usetransition(':enter', [style({opacity: 0, transform: 'scale(0.5)'}), animate('400ms', style({opacity: 1, transform: 'scale(1)'}))])andtransition(':leave', [animate('400ms', style({opacity: 0, transform: 'scale(0.5)'}))])matches this logic exactly.Final Answer:
combines fade and scale on enter and leave -> Option CQuick Check:
Enter: fade+grow, Leave: fade+shrink [OK]
Quick Trick: Set initial style on enter, animate to final; reverse on leave [OK]
Common Mistakes:
- Reversing enter and leave styles
- Missing initial style on enter
- Animating without target styles
Master "Animations" in Angular
Want More Practice?
15+ quiz questions · All difficulty levels · Free
Free Signup - Practice All QuestionsMore Angular Quizzes