Bird
0
0

You want an element to slide in from the bottom when it enters and slide out to the top when it leaves. Which animation trigger correctly implements this?

hard📝 component behavior Q8 of 15
Angular - Animations
You want an element to slide in from the bottom when it enters and slide out to the top when it leaves. Which animation trigger correctly implements this?
Atrigger('slideVertical', [transition(':enter', [animate('500ms ease-in', style({transform: 'translateY(0)'}))]), transition(':leave', [style({transform: 'translateY(100%)'}), animate('500ms ease-out')])])
Btrigger('slideVertical', [transition(':enter', [style({transform: 'translateY(-100%)'}), animate('500ms ease-in', style({transform: 'translateY(0)'}))]), transition(':leave', [animate('500ms ease-out', style({transform: 'translateY(100%)'}))])])
Ctrigger('slideVertical', [transition(':enter', [style({transform: 'translateY(100%)'}), animate('500ms ease-in', style({transform: 'translateY(0)'}))]), transition(':leave', [animate('500ms ease-out', style({transform: 'translateY(-100%)'}))])])
Dtrigger('slideVertical', [transition(':enter', [style({transform: 'translateX(100%)'}), animate('500ms ease-in', style({transform: 'translateX(0)'}))]), transition(':leave', [animate('500ms ease-out', style({transform: 'translateX(-100%)'}))])])
Step-by-Step Solution
Solution:
  1. Step 1: Understand slide directions

    Slide in from bottom means start at translateY(100%) and animate to 0.
  2. Step 2: Check leave animation

    Slide out to top means animate to translateY(-100%).
  3. Step 3: Match with options

    trigger('slideVertical', [transition(':enter', [style({transform: 'translateY(100%)'}), animate('500ms ease-in', style({transform: 'translateY(0)'}))]), transition(':leave', [animate('500ms ease-out', style({transform: 'translateY(-100%)'}))])]) matches these directions correctly.
  4. Final Answer:

    slides in from bottom and out to top -> Option C
  5. Quick Check:

    Enter from 100%, leave to -100% on Y axis [OK]
Quick Trick: Positive Y is bottom, negative Y is top for translateY [OK]
Common Mistakes:
  • Swapping positive and negative Y values
  • Using X axis instead of Y
  • Missing initial style on enter

Want More Practice?

15+ quiz questions · All difficulty levels · Free

Free Signup - Practice All Questions
More Angular Quizzes