angular2動畫回調變化值不影響

//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;

// HTMLangular2動畫回調變化值不影響

<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結束後做無效=> *這個動畫的時候爲假是真正的做* =>無效動畫慢慢消失了，但動畫並沒有消失

來源

2017-01-12 teenth

你的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>

來源

2017-01-12 10:02:44 ranakrunal9

angular2動畫回調變化值不影響

回答

相關問題