angular2 анимация обратного вызова изменить значение не влияет

Question

//animation 
export const hiddenFade = trigger('hiddenFade', [ 
    transition('void => *', [ 
    animate('300ms', keyframes([ 
     style({opacity: 0}), 
     style({opacity: 0.5}), 
     style({opacity: 1}), 
    ])) 
    ]), 
    transition('* => void', [ 
    animate('300ms 1s', keyframes([ 
     style({opacity: 1}), 
     style({opacity: 0.5}), 
     style({opacity: 0}), 
    ])) 
    ]) 
]) 

//component 
isCheckForm: boolean = true; 

// HTML

<div class="form-group" *ngIf="!isCheckForm" [@hiddenFade] (@hiddenFade.done) = 'isCheckForm = true'> 
    <label class="col-sm-10 col-sm-offset-2 text-danger">{{showWarningText}}</label> 
</div> 

Я хочу, чтобы эффект, когда isCheckForm становится ложной при выполнении пустот => * эта анимации после окончания этой анимации isCheckForm правда, чтобы сделать * => пустота анимация медленно исчезла, но анимация не исчезнет

Answer 1

Вы HTML должен быть, как показано ниже, и я думаю, что @hiddenFade.done не требуется :

<div class="form-group" *ngIf="!isCheckForm" [@hiddenFade]="isCheckForm" (@hiddenFade.done)="isCheckForm = true"> 
    <label class="col-sm-10 col-sm-offset-2 text-danger">{{showWarningText}}</label> 
</div>