角2動畫第一初始化

Question

我有一個組件動畫的位置：

animations: [ 
    trigger('profilemenuState', [ 
     state('deselected', style({ 
      width: '8.3%' 
     })), 
     state('selected', style({ 
      width: '30%' 
     })), 
     transition('deselected => selected', animate('500ms ease-in')), 
     transition('selected => deselected', animate('500ms ease-out')) 
    ]) 
] 

和HTML模板，如：

<div [@profilemenuState]="state" 
    (@profilemenuState.done)="test()"> 
</div> 

的問題是，爲什麼事件done在初始加載射擊，前state會切換？

Answer 1

每次profileState觸發器已更改爲其狀態之一時，都會觸發該事件。如果您的state變量包含"deselected"作爲初始狀態，則由於從void => deselected轉換而引發(done)。

如果您想區分test()方法中的不同狀態，您可以將其更改爲test($event)，並且您將獲得注入該方法的類型爲AnimationTransitionEvent的參數。你會得到一些關於當前狀態的信息。

例如

test(event: AnimationTransitionEvent) { 
    console.log(event.toState); 
} 

希望這有助於！