fade animation issue

Issue

what causes that [@fadeInOut] that it only works at the first load of the page when I toggle the isExpanded to hide and show content because of the [@fadeInOut] the content are no longer showing...any idea what causes this and the alternatives or solution. Thanks.

#htmlt code

 <div *ngIf="isExpanded" [@fadeInOut]>
    <ng-content select="[Content]"></ng-content>
  </div>

#ts

  trigger('fadeInOut', [
        state('0, void', style({
            opacity: 0
        })),
        state('1, *', style({
            opacity: 1
        })),
        transition('1 => 0', animate('10ms ease-out')),
        transition('0 => 1', animate('100ms ease-in')),
        transition('void <=> *', animate('200ms ease-in'))
    ]),

Solution

Maybe its due to the dynamic content through ng-content instead of *ngIf use [hidden] You need to invert the if condition though!

<div class="page-section-card-content-container" [hidden]="!isExpanded" [@fadeInOut]>
    <ng-content select="[Content]"></ng-content>
  </div>

#ts

 trigger('fadeInOut', [
        state('0, void', style({
            opacity: 0
        })),
        state('1, *', style({
            opacity: 1
        })),
        transition('1 => 0', animate('10ms ease-out')),
        transition('0 => 1', animate('100ms ease-in')),
        transition('void <=> *', animate('200ms ease-in'))
    ]),

Answered By - Naren Murali