[Solved] Analyze this Angular animation trigger:trigger('visibility', [ state('shown', style({ opacity: 1, height: '*' })), state('hidden', style({ opacity: 0, height:... | Angular

Angular - Animations

Analyze this Angular animation trigger:

trigger('visibility', [
  state('shown', style({ opacity: 1, height: '*' })),
  state('hidden', style({ opacity: 0, height: '0px' })),
  transition('hidden => shown', animate('150ms ease-in')),
  transition('shown => hidden', animate('300ms ease-out'))
])

What is the animation duration when transitioning from 'shown' to 'hidden'?

A150 milliseconds

B300 milliseconds

C450 milliseconds

DNo animation occurs

Step-by-Step Solution

Solution:

Step 1: Identify transition direction
Transition is from 'shown' to 'hidden'.
Step 2: Locate matching transition
transition('shown => hidden', animate('300ms ease-out')) matches.
Step 3: Extract duration
Duration specified is 300ms.
Final Answer:
300 milliseconds -> Option B
Quick Check:
Check transition arrow and duration value [OK]

Quick Trick: Check transition arrow for correct duration [OK]

Common Mistakes:

Mixing up durations for opposite transitions
Assuming durations add up
Ignoring ease-in vs ease-out

Master "Animations" in Angular

9 interactive learning modes - each teaches the same concept differently

Learn Why Deep Visual Try Challenge Project Recall Perf

More Angular Quizzes

Analyze this Angular animation trigger:

Step 1: Identify transition direction

Step 2: Locate matching transition

Step 3: Extract duration

Final Answer:

Quick Check:

Want More Practice?