Which of the following is the correct trigger definition?
hard📝 Application Q15 of 15
Angular - Animations
You want to create an Angular animation trigger named slideToggle that has two states: expanded with height '300px' and collapsed with height '0px'. The transition from collapsed to expanded should animate over 700ms, and the reverse over 300ms. Which of the following is the correct trigger definition?
States 'expanded' and 'collapsed' must have heights '300px' and '0px' respectively. trigger('slideToggle', [state('expanded', style({ height: '300px' })), state('collapsed', style({ height: '0px' })), transition('collapsed => expanded', animate('700ms')), transition('expanded => collapsed', animate('300ms'))]) matches this correctly.
Step 2: Check transition directions and durations
Transition from 'collapsed' to 'expanded' is 700ms, and reverse is 300ms. trigger('slideToggle', [state('expanded', style({ height: '300px' })), state('collapsed', style({ height: '0px' })), transition('collapsed => expanded', animate('700ms')), transition('expanded => collapsed', animate('300ms'))]) matches these durations and directions.
Final Answer:
Correct trigger with proper states and transitions -> Option B
Quick Check:
States and transitions match requirements [OK]
Quick Trick:Match state styles and transition durations carefully [OK]
Common Mistakes:
Swapping state styles for expanded and collapsed
Reversing transition durations
Using single transition for both directions with wrong duration
Master "Animations" in Angular
9 interactive learning modes - each teaches the same concept differently
