[Solved] Given this trigger definition:trigger('toggle', [ state('on', style({ opacity: 1 })), state('off', style({ opacity:... | Angular

Angular - Animations

Given this trigger definition:

trigger('toggle', [
  state('on', style({ opacity: 1 })),
  state('off', style({ opacity: 0 })),
  transition('on => off', animate('500ms'))
])

What happens when the state changes from 'on' to 'off'?

AThe element fades out over 500 milliseconds

BThe element instantly becomes invisible

CThe element fades in over 500 milliseconds

DNo animation occurs

Step-by-Step Solution

Solution:

Step 1: Analyze the transition definition
The transition 'on => off' uses animate('500ms'), changing opacity from 1 (visible in 'on' state) to 0 (invisible in 'off' state), so the element fades out over 500 milliseconds.
Final Answer:
The element fades out over 500 milliseconds -> Option A
Quick Check:
Transition 'on => off' = fade out 500ms [OK]

Quick Trick: Transition defines animation duration between states [OK]

Common Mistakes:

Master "Animations" in Angular

9 interactive learning modes - each teaches the same concept differently

More Angular Quizzes

Given this trigger definition: