animations動畫在angular2官網裏面已經講解很詳細了，那麽動畫功能在實際項目中應該如何組織文件，動畫文件放在哪個位置，如何來組織結構使得動畫模塊和其他模塊之間運作調理清晰呢，下面參照NiceFish來講解一下：

一：定義動畫

在app文件夾裏面有一個專門的動畫模塊

拿一個例子來簡單分析一下：

import { trigger, state, style, transition, animate, keyframes } from ‘@angular/animations‘;

export const flyIn = trigger(‘flyIn‘, [
  state(
 
‘in‘, style({transform: ‘translateX(0)‘})),
  transition(‘void => *‘, [
       animate(300, keyframes([
        style({opacity: 0, transform: ‘translateX(-100%)‘, offset: 0}),
        style({opacity: 1, transform: ‘translateX(25px)‘,  offset: 0.3}),
        style({opacity: 1, transform: ‘translateX(0)‘,     offset: 1.0})
      ]))
  ]),
  transition(
 
‘* => void‘, [
        animate(300, keyframes([
        style({opacity: 1, transform: ‘translateX(0)‘,     offset: 0}),
        style({opacity: 1, transform: ‘translateX(-25px)‘, offset: 0.7}),
        style({opacity: 0, transform: ‘translateX(100%)‘,  offset: 1.0})
      ]))
  ])
]);

trigger用於定於動畫功能，返回動畫模塊，第一個參數‘flyIn‘是動畫指令名，第二個參數是一個數組，state是定義每個動畫狀態，transition定義動畫狀態與另一個動畫狀態轉化過程中具體的動作情況。


二：裝載動畫
 

在組件文件中動畫指令會被定義在組件當中，使得組件模塊（angular模塊）能夠在編譯自己視圖的時候能夠識別動畫指令
在component.ts文件中：

import { fadeIn } from ‘../../animations/fade-in‘;

@Component({
  animations: [ fadeIn ]，    // 動畫指令列表   
  。。。。
})    

三：使用動畫

在component.html組件視圖中：

此外還包括[@fadeIn]="state"可賦值指令的情況以及一系列定義使用動畫的各種情況，在官網中可以看到。這裏簡單介紹在項目中如何使用指令。

angular2項目關於動畫的處理