[Solved] What is the effect of this Angular animation snippet?trigger('fadeToggle', [transition(':leave', [animate('500ms', style({opacity: 0}))])]) | Angular

Angular - Animations

What is the effect of this Angular animation snippet?

trigger('fadeToggle', [transition(':leave', [animate('500ms', style({opacity: 0}))])])

AThe element instantly disappears without animation

BThe element fades in over 500ms when added to the DOM

CThe element fades out over 500ms when removed from the DOM

DThe element slides up when removed

Step-by-Step Solution

Solution:

Step 1: Identify the transition ':leave'
This means the animation runs when the element is removed from the DOM.
Step 2: Understand the animation details
The element's opacity animates to 0 over 500ms, causing a fade out effect.
Final Answer:
The element fades out over 500ms when removed from the DOM -> Option C
Quick Check:
Fade out on leave = A [OK]

Quick Trick: ':leave' triggers animation when element is removed [OK]

Common Mistakes:

Master "Animations" in Angular

9 interactive learning modes - each teaches the same concept differently

More Angular Quizzes

What is the effect of this Angular animation snippet?