fade animation 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'))
]),

Continue reading...