refer :

https://angular.io/guide/animations

https://github.com/angular/angular/blob/master/packages/animations/src/animation_metadata.ts

https://github.com/angular/angular/commit/f1a9e3c (router)

angular 的動畫建立在一堆的方法上:

1. trigger
觸發器, 用來和 dom 交互 <div [@triggerName]="state" ></div>
trigger 負責定義各種 state 和它們之間變化來變化去 transition

trigger(‘triggerA‘, [ 
    state(‘A‘, style...),
    state(‘B‘, style...), 
    transition(‘A => B‘, animate...),
    transition(‘B => A‘, animate...)
])

2. State
angular 的概念是通過改變狀態(state)來觸發(trigger)動畫(animate)
每個狀態都定義了最終的樣式

state(‘A‘, style...)

3. transition
負責定義各種 state 之間錯綜復雜的轉換關系

transition(‘A => B‘, animate...)
transition(
 
‘A <=> B‘, animate...)
transition(‘* => *‘, animate...) * is whatever
transition(‘:enter‘, animate...)
transition(‘:leave‘, animate...)
transition(‘* => void‘, animate...) void表示無, whatever to null 也等於 :leave
transition((fromState, toState) => boolean, animate...) 還可以寫方法判斷哦 
transition(
 
‘A => B‘,[style,animate]) style 也可以放進來哦.
transition(‘A => B‘,[animate,animate]) 數組 animate 會按序執行和 transition(‘A => B‘, sequence([animate,animate])) 是一樣的
transition(‘A => B‘,group(animate,animate)) 不想按序執行可以使用 group 

到這裏可以看出一個基本的流程
[@triggerName]="state" 監聽了 state 的變化
一但變化發生觸發器就查找匹配的 transition 然後執行 animate. 就這樣簡單

4. Style
就是定義 css 啦

style({ display : ‘none‘ })

5. animate
具體的動畫定義

animate("5s 10ms cubic-bezier(.17,.67,.88,.1)", style(...)) 

duration= 5second
delay=10ms
easing= cubic-bezier (ease-out 等等 css 有的都可以放)
最後加上 style 就可以動畫了咯

animate("5s", keyframes([ 
    style({opacity: 0, offset: 0}),
    style({opacity: 1, offset: 0.3})
])) 

如果你想完全掌握節奏可以使用 keyframes + offset 做定義, offset 0.3 是百分比

6.group
就是把多個 animate 組合起來並發執行.

group(animate,animate)

7.keyframes
上面說了

8.sequence
按順序一個接一個執行, 和 group 剛好打對臺, 一個 step by step, 另一個是並發

sequence(animate,animate)

9.useAnimation

animate是可以封裝的. 使用 animation 方法

let fadeAnimation = animation([
    style({ opacity: ‘{{ start }}‘ }),
    animate(‘{{ time }}‘,
    style({ opacity: ‘{{ end }}‘))
], { params: { time: ‘1000ms‘, start: 0, end: 1 }});

然後在任何想使用 animate 的地方改用 useAnimation

useAnimation(fadeAnimation, {
    params: {
      time: ‘2s‘,
     start: 1,
      end: 0
    }
})

10.query
任何你想使用 animate 的地方都可以使用 query
animate 會施法在當前的 element 上, 而通過 query 你可以施法在 element 的 child 上
query 支持 css 選擇器的語法，還有一些 angular 特別的定義語法.

query(‘css-selector‘,[animate...])

- Querying for newly inserted/removed elements using `query(":enter")`/`query(":leave")`

這裏有個神技

<div [@listAnimation]="items.length">
    <div *ngFor="let item of items">
        {{ item }}
    </div>
</div>

通過 items.length 配上下面的 transition * => * + query child 就可以實現 items 在插入和移除時的動畫了.

transition(‘* => *‘, [  
    query(‘:leave‘, [
        stagger(100, [
         animate..
        ])
    ]),
    query(‘:enter‘, [        
        stagger(100, [
         animate..
        ])
    ])
])

- Querying all currently animating elements using `query(":animating")`
- Querying elements that contain an animation trigger using `query("@triggerName")`
- Querying all elements that contain an animation triggers using `query("@*")`
- Including the current element into the animation sequence using `query(":self")`

11.stagger
stagger 是配合 query 來使用的, 它的作用是當 query select 出很多 element 時，你希望它們不要並發, 而是隔著一個間隔時間.

query(‘css-selector‘,[stagger(100,[animate])]) 

比如 select 出 2 個 element, 一個觸發動畫先，另一個則會等間隔 100ms 後才觸發.

12.animateChild
animateChild 是一個 manual trigger 概念

<div [@parentAnimation]="exp"> 
    <div [@childAnimation]="exp">
        one
    </div>
</div>

angular 說, 當 parent trigger 觸發後，child trigger by default 是不會被觸發的 (不過我試了會 /.\)
而我們可以在 parent trigger 中通過 query([email protected],[animateChild()]) 來手動觸發 child trigger.
這個在做 router animate 時會用到哦.

router animation 實現 https://github.com/angular/angular/commit/f1a9e3c

其實也是依據上面這些方法來做的. 主要用了 parent, child, query, enter, leave, animateChild 這些概念.

angular2 學習筆記 ( animation 動畫 )