摘要：使用組件將根據視口放置，并滑過頁面。這意味著我們不能使用狀態來對路由組件進行樣式，因為這樣可以將樣式應用于父結點我們的示例中的主元素，而不是路由組件。

原文：Angular?—?Supercharge your Router transitions using new animation features (v4.3+)

首先我們看一下效果展示的demo

Basic

Variation

Stagger

Final

為了介紹這個新的動畫，我們將用一個只有home和about頁面的簡單應用來做演示。我們將要用內容向左飛出然后用下圖所示的交錯進入的效果實現一個很酷的路由頁面切換

獨立引入Angular 4里的動畫部分，這樣可以使你的項目更輕便，如果你不想用動畫的話只要直接拿掉就可以了

首先，我們把下列依賴獨立引入你的項目：@angular/animations 和 @angular/platform-browser/animations 接下來在項目中的入口模塊的代碼引入 BrowserAnimationsModule

app.module.ts

import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { BrowserAnimationsModule } from "@angular/platform-browser/animations";

@NgModule({
  imports: [ BrowserModule, BrowserAnimationsModule, ... ],
  declarations: [ App, ... ],
  bootstrap: [ App ]
})
export class AppModule { }

如果你需要使用 不支持原生WEB動畫API的瀏覽器 的話：比如IE、Edge、Safari等等。你必須要引入web-animations依賴

正如我們所見，我們的例子將由頂部導航和主體內容部分組成。各個內容部分將共享同一個導航欄，我們使用router-outlet元素來通知路由我們需要渲染組件的地方和需要匹配路由的地方

app.module.ts

@Component({
  selector: "my-app",
  template: `
    
    

      
    
  `
})
export class App { }

我們使用靜態路由來創建不同的導航鏈接。然后我們用routerLinkActive指令來裝飾當前的內容部分。舉個例子，如果我們要導航到首頁Home，導航鏈接的標簽上將加上active選擇器并根據這個渲染對應部分

Home

讓我們改變默認的路由變換設置。首先我們需要加上動畫觸發器屬性 routerTransition ，然后我們綁定@routerTransition在主標簽元素上，之后，我們可以裝飾內部的路由組件并交由Angular的路由來實例化

我們可以用一個div或者其他標簽來替換主標簽元素，只要它是router-outlet的父結點

我們用getState方法傳遞外部設置的參數來設置正確的狀態。這個方法將返回一個 state 的用于設置路由定義的屬性。我們接下來看下一個部分，這個設置將允許我們去控制每個路由將執行哪種切換

提示：我們可以通過使用#o="outlet"來獲得外部傳參，由于在router-outlet definition里使用exportAs使之成為可能。這給了我們一個快速獲取底層RouterOutlet選擇器類的途徑

app.module.ts

@Component({
  selector: "my-app",
  animations: [ routerTransition ],
  template: `
    

      
    
  `
})
export class App {
  getState(outlet) {
    return outlet.activatedRouteData.state;
  }
}

在Angular里面，路由會去嘗試匹配路由定義和當前的url，同一個生效的配置優先級由上到下

app.routing.ts

const routes = [
  { path: "", redirectTo: "home", pathMatch: "full" },
  { path: "home", component: Home, data: { state: "home" } },
  { path: "about", component: About, data: { state: "about" } },
  { path: "**", component: NotFound }
];

export const AppRouting = RouterModule.forRoot(routes, { 
  useHash: true
});

路由設置告訴路由當匹配到Home和About頁面的路徑時去實例化對應的組件。注意這個data屬性設置每個狀態給對應的路由。這些狀態將要去匹配我們在routerTransition中設置的切換

我們也需要設置兩個為了通常展示的特殊路由。這個空路徑的路由將提供一個默重定向到主頁的路由以防導航去了一個非我們需要的路徑。其他的路由或者未定義的路由展示一個用戶友好的404頁面就好

為了這個例子，因為Plunker的原因我們使用一個哈希定位的策略。如果我們需要后端我們可以沿用普通的路徑跳轉，但是如果沒有后端來展示404錯誤的話我們就使用這個策略來重定向未知路徑到index.html

讓我們隆重介紹Angular動畫。Angular是基于最新的Web Animations API,我們使用動畫觸發器（animation triggers）來定義一系列狀態和變換屬性。我們也可以用CSS樣式來改寫實現我們想要的效果

主要的原則是開始和結尾的動畫樣式由我們自定義，中間變換的計算過程交給工具本身

當然，可以通過設置時間來設置中間動畫，比如1s，1.2s，200ms。其他的就是大家熟悉的CSS動畫的速度屬性比如ease、liner和ease-in-out。

而Angular 4.2以上的版本里我們可以用順序（sequence）和組合（group）來讓動畫一個接一個執行還是同時執行；查詢（query）可以操作子元素而交錯（stagger）可以創造一個很棒的連鎖效果

這些事件將觸發一個動畫：

向或者從視圖里裝載或者卸載一個元素

改變已綁定觸發器的狀態 比如：[@routerTransition]="home"

在路由轉換的前后關系中，要注意，組件正在被移除并作為導航的一部分被添加到視圖中的過程。

首先讓我們看一下如何使用Angular動畫來讓內容向左滑出

最初，定義我們的觸發器routerTransition。在這個實現中，我們使用了一個覆蓋所有可能狀態的通用轉換

這是個通過兩個獨立轉換* => home 、 * => about完成的重寫

我們可以在我們的轉換中用兩個特殊標識 void 和 *來代表：一個元素尚未被掛載到視圖或者任何狀態

outer.animations.ts

import {trigger, animate, style, group, animateChild, query, stagger, transition} from "@angular/animations";

export const routerTransition = trigger("routerTransition", [
  transition("* <=> *", [
    /* order */
    /* 1 */ query(":enter, :leave", style({ position: "fixed", width:"100%" })
      , { optional: true }),
    /* 2 */ group([  // block executes in parallel
      query(":enter", [
        style({ transform: "translateX(100%)" }),
        animate("0.5s ease-in-out", style({ transform: "translateX(0%)" }))
      ], { optional: true }),
      query(":leave", [
        style({ transform: "translateX(0%)" }),
        animate("0.5s ease-in-out", style({ transform: "translateX(-100%)" }
      ], { optional: true }),
    ])
  ])
])

我們在第二個參數里定義了一個順序執行通用轉換的數組 。第一個參數呢，使用了一個新的查詢指令去選擇新的路徑組件和離開的組件；查詢指令可以使用類似CSS偽類的選擇器方式選中，比如一些特殊的關鍵詞：:enter，:leave和*

在第一次查詢中，:enter和:leave將會匹配被掛載和卸載的組件，多個選擇器用逗號分開。一旦我們有了這些路由組件，我們可以設置他們的樣式去達到滑動的效果。使用 { position: fixed } 組件將根據視口放置，并滑過頁面。

接下來，我們將設置一個組合使得內部動畫同時執行。

讓我們想象一下，我們從Home切換到About頁面，第一次查詢將會匹配這個被加了:enter的組件，那就是About組件。我們首先在右邊很遠的地方設置動畫，然后讓它緩緩的進入滑動到固定的位置。結果就是About組件從右邊滑到左邊。第二次查詢中，我們用了一個相似的路徑，使用:leave來匹配同樣在左邊很遠處的Home組件

CSS小提示：為了更好的表現，我們使用transform取代top，bottom，left，right

注意這種實現方式與我們將觸發器綁定到我們想要動畫的元素的動畫中的用例不同。
這意味著我們不能使用狀態來對路由組件進行樣式，因為這樣可以將樣式應用于父結點（我們的示例中的主元素），而不是路由組件。

在路由初始化期間，一些查詢指令會返回空的結果，為了避免拋出錯誤，我們在所有查詢中設置了可選參數。

一旦我們的基礎部分完成了，我們可以很容易在這個基礎上用查詢和交錯控制加上一些新的效果

export const routerTransition = trigger("routerTransition", [
  transition("* <=> *", [
    /* order */
    /* 1 */ query(":enter, :leave", ...),
    /* 2 */ query(".block", style({ opacity: 0 })),
    /* 3 */ group([  // block executes in parallel
      query(":enter", [...]),
      query(":leave", [...]),
    ]),
    /* 4 */ query(":enter .block", stagger(400, [
      style({ transform: "translateY(100px)" }),
      animate("1s ease-in-out", 
        style({ transform: "translateY(0px)", opacity: 1 })),
    ])),
  ])
])

最終，我們使用轉換（transform）和透明（opacity）來垂直向上滑動進入并淡入。
通過使用交錯，我們為每個動畫引入了一個小的延遲（以毫秒為單位），創建了一個很好的窗簾效果。最后一點，我們不得不引入一個新的查詢，用（opacity：0）初始化.block元素，這樣當組件滑入時就不會顯示。

作為最終的潤色，我添加了一些反向交錯離開Home組件的代碼并且也加入了貝塞爾曲線來優化路徑，最后效果如下圖