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?
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
Step-by-Step Solution
Solution:
Step 1: Understand slide directions
Slide in from bottom means start at translateY(100%) and animate to 0.Step 2: Check leave animation
Slide out to top means animate to translateY(-100%).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.Final Answer:
slides in from bottom and out to top -> Option CQuick 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
Master "Animations" in Angular
Want More Practice?
15+ quiz questions · All difficulty levels · Free
Free Signup - Practice All QuestionsMore Angular Quizzes