## Angular 2 動畫筆記 Angular 2 的動畫定義在組件裝飾器的`animations`屬性中。 Angular 2自定義了一套動畫描述語言(DSL)，用于映射CSS3動畫，過度，變換操作。在使用時則是調用一系列動畫函數。 通過查看動畫相關的api，可以發現一共有3個抽象類`AnimationMetadata`，`AnimationStateMetadata`和`AnimationWithStepsMetadata`，其中`AnimationWithStepsMetadata`擴展了`AnimationStateMetadata` 抽象類。 ### 定義類和實現函數 ``` trigger => AnimationEntryMetadata state => AnimationStateDeclarationMetadata extends AnimationStateMetadata transition => AnimationStateTransitionMetadata extends AnimationStateMetadata keyframes => AnimationKeyframesSequenceMetadata extends AnimationMetadata style => AnimationStyleMetadata extends AnimationMetadata animate => AnimationAnimateMetadata extends AnimationMetadata sequence => AnimationSequenceMetadata extends AnimationWithStepsMetadata group => AnimationGroupMetadata extends AnimationWithStepsMetadata ``` ### 使用方式 ``` |- trigger[] |- state |- style |- transition |- style |- animate |- style |- keyframes |- keyframes[] |- style |- sequence # 可以嵌套 |- style |- animate |- sequence |- group |- group # 可以嵌套 |- style |- animate |- sequence |- group ``` > 注：`keyframes`中能用于`animate`方法內 ### 特殊狀態 - \* \*(通配符)狀態匹配任何動畫狀態。 - void 有一種叫做void的特殊狀態，它可以應用在任何動畫中。它表示元素沒有被附加到視圖。這種情況可能是由于它尚未被添加進來或者已經被移除了。 void狀態在定義“進場”和“離場”的動畫時會非常有用。 使用void和*狀態，可以定義元素進場與離場時的轉場動畫： - 進場：void => * - 離場：* => void > 注： `void => *` 對應別名：`:enter`， `* => void` 對應別名：`:leave` ### 使用方式 - 在模塊中 ```typescript @Component({ animations: [ trigger('motion_1', [ state('show', style({ // ... })), transition('void => *', ), ]), trigger('motion_2', [ ]) ] }) ``` - 在視圖中 ```html <div @motion></div> <div [@motion]='state'></div> ```