Bird
0
0

You want to animate a list where items fade in and slide up when added, and fade out and slide down when removed. Which animation trigger correctly combines these effects?

hard📝 Application Q15 of 15
Angular - Animations
You want to animate a list where items fade in and slide up when added, and fade out and slide down when removed. Which animation trigger correctly combines these effects?
Atrigger('listAnim', [ transition(':enter', [ style({ opacity: 0, transform: 'translateY(20px)' }), animate('400ms ease-out', style({ opacity: 1, transform: 'translateY(0)' })) ]), transition(':leave', [ animate('400ms ease-in', style({ opacity: 0, transform: 'translateY(20px)' })) ]) ])
Btrigger('listAnim', [ transition(':enter', [ style({ opacity: 1, transform: 'translateY(0)' }), animate('400ms ease-out', style({ opacity: 0, transform: 'translateY(20px)' })) ]), transition(':leave', [ animate('400ms ease-in', style({ opacity: 1, transform: 'translateY(0)' })) ]) ])
Ctrigger('listAnim', [ transition(':enter', [ animate('400ms ease-out', style({ opacity: 1, transform: 'translateY(0)' })) ]), transition(':leave', [ style({ opacity: 0, transform: 'translateY(20px)' }), animate('400ms ease-in') ]) ])
Dtrigger('listAnim', [ transition(':enter', [ style({ opacity: 0 }), animate('400ms ease-out', style({ transform: 'translateY(0)' })) ]), transition(':leave', [ animate('400ms ease-in', style({ opacity: 0 })) ]) ])
Step-by-Step Solution
Solution:
  1. Step 1: Check ':enter' transition for fade in and slide up

    The element starts invisible and 20px down, then animates to visible and original position.
  2. Step 2: Check ':leave' transition for fade out and slide down

    The element animates to invisible and moves 20px down before removal.
  3. Step 3: Verify animation timing and easing

    Both transitions use 400ms with easing appropriate for smooth effect.
  4. Final Answer:

    trigger('listAnim', [ transition(':enter', [ style({ opacity: 0, transform: 'translateY(20px)' }), animate('400ms ease-out', style({ opacity: 1, transform: 'translateY(0)' })) ]), transition(':leave', [ animate('400ms ease-in', style({ opacity: 0, transform: 'translateY(20px)' })) ]) ]) -> Option A
  5. Quick Check:

    Fade + slide up/down on enter/leave [OK]
Quick Trick: Enter: start hidden and down; leave: fade out and slide down [OK]
Common Mistakes:
  • Reversing opacity or transform values
  • Missing style before animate on enter
  • Animating only opacity or only transform

Want More Practice?

15+ quiz questions · All difficulty levels · Free

Free Signup - Practice All Questions
More Angular Quizzes