Bird
0
0

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
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?
AUse <code>transition(':enter', [style({opacity: 1, transform: 'scale(1)'}), animate('400ms', style({opacity: 0, transform: 'scale(0.5)'}))])</code> and <code>transition(':leave', [animate('400ms', style({opacity: 1, transform: 'scale(1)'}))])</code>
BUse <code>transition(':enter', [animate('400ms', style({opacity: 1, transform: 'scale(1)'}))])</code> and <code>transition(':leave', [style({opacity: 0, transform: 'scale(0.5)'}), animate('400ms')])</code>
CUse <code>transition(':enter', [style({opacity: 0, transform: 'scale(0.5)'}), animate('400ms', style({opacity: 1, transform: 'scale(1)'}))])</code> and <code>transition(':leave', [animate('400ms', style({opacity: 0, transform: 'scale(0.5)'}))])</code>
DUse <code>transition(':enter', [style({opacity: 0}), animate('400ms', style({opacity: 1}))])</code> and <code>transition(':leave', [animate('400ms', style({opacity: 0}))])</code>
Step-by-Step Solution
Solution:
  1. Step 1: Define enter animation

    Start with opacity 0 and scale 0.5, animate to opacity 1 and scale 1.
  2. Step 2: Define leave animation

    Animate from current to opacity 0 and scale 0.5.
  3. Step 3: Verify option correctness

    Use transition(':enter', [style({opacity: 0, transform: 'scale(0.5)'}), animate('400ms', style({opacity: 1, transform: 'scale(1)'}))]) and transition(':leave', [animate('400ms', style({opacity: 0, transform: 'scale(0.5)'}))]) matches this logic exactly.
  4. Final Answer:

    combines fade and scale on enter and leave -> Option C
  5. Quick 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

Want More Practice?

15+ quiz questions · All difficulty levels · Free

Free Signup - Practice All Questions
More Angular Quizzes