angular2專案關於動畫的處理

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

一：定義動畫

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

import  from '@angular/animations';

export const flyin = trigger('flyin', [
state('in', style()),
transition('void => *', [
animate(300, keyframes([
style(),
style(),
style()
]))]),
transition('* => void', [
animate(300, keyframes([
style(),
style(),
style()
]))])
]);

trigger用於定於動畫功能，返回動畫模組，第乙個引數'flyin'是動畫指令名，

第二個引數是乙個陣列，state是定義每個動畫的狀態(元素動畫的每個最終狀態)，動畫的狀態裡面的樣式不僅包含動畫行為最終樣式，也可以包含非動畫的樣式，比如 a狀態height=0轉到b狀態height=100，b裡面的狀態樣式不僅height=100，還可以加入color，background等無關動畫行為的樣式。
transition定義動畫狀態與另乙個動畫狀態轉化過程中具體的動作情況。有兩個形式：

transition('

* => void
', [
animate(
300, keyframes([
style(),
style(),
style()
]))])

transition('

void => *
', [
style(),
animate(
'0.2s ease-in')
]),transition(
'* => void
', [
animate(
'0.2s 0.1s ease-out
', style())
])

裡面的style方法定義的樣式是動畫前或者動畫後的特定狀態，動畫正是基於style所定義的狀態逐步轉化為state裡面的樣式狀態。　　

二：裝載動畫

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

import  from '../../animations/fade-in';

@component()    

這裡的sate代表最終狀態。如果@fadein沒有賦值的話，動畫會取定義的預設狀態為最終狀態。有賦值的話比如[@fadein]="in"：表示該元素檢視出現的時候會經過 vode ——>*所定義的動畫行為，最後狀態到達in這個stae的樣式。

angular2專案教程 微型Blog系統1

照應的ppt 1.ng build prod aot angular cli會在專案根目錄下生成乙個dist目錄，裡面就是編譯 壓縮好的檔案了。2.ng serve 啟動服務，修改了檔案，瀏覽器改變 3.ng serve prod aot 就會 變小 建立乙個元件 ng g c user user....

angular2專案教程 微型Blog系統2

route,module,component 靜態路由 這樣配置，依賴的元件全打包，會很大。非同步路由，就不會 loadchildren 架構思想 元件化，依賴注入，資料繫結 雙大括號和 ngmodel 值繫結，事件繫結 元件間通訊 共享元件 給子元件傳引數。component export cla...

angular2專案教程 微型Blog系統3

js太多，就會http請求很多 js少，單個檔案又太大 這需要設計者權衡 模組和共享模組 共享模組 sharedmodule和postsharedmodule 匯入到manage和user模組 模組懶載入 loadchildren點到路徑的時候才載入這個模組，非同步載入 第三種元件傳遞引數，路由 m...