[Solved] What is wrong with this animation trigger?trigger('fade', [transition(':enter', [style({opacity: 1}), animate('300ms', style({opacity: 0}))])]) | Angular

Angular - Animations

What is wrong with this animation trigger?

trigger('fade', [transition(':enter', [style({opacity: 1}), animate('300ms', style({opacity: 0}))])])

AMissing trigger name in the function

BAnimation fades out on enter instead of fading in

Canimate() duration must be in seconds, not milliseconds

Dstyle() cannot be used inside transition

Step-by-Step Solution

Solution:

Step 1: Analyze the animation steps on ':enter'
Starts at opacity 1 and animates to opacity 0, which means fade out on enter.
Step 2: Understand expected behavior
Usually, fade in means starting at 0 and animating to 1 on enter.
Final Answer:
Animation fades out on enter instead of fading in -> Option B
Quick Check:
Fade direction reversed = B [OK]

Quick Trick: Fade in means opacity 0 to 1 on enter [OK]

Common Mistakes:

Master "Animations" in Angular

9 interactive learning modes - each teaches the same concept differently

More Angular Quizzes

What is wrong with this animation trigger?