摘要：使用組件將根據(jù)視口放置，并滑過頁面。這意味著我們不能使用狀態(tài)來對(duì)路由組件進(jìn)行樣式，因?yàn)檫@樣可以將樣式應(yīng)用于父結(jié)點(diǎn)我們的示例中的主元素，而不是路由組件。

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

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

Basic

Variation

Stagger

Final

為了介紹這個(gè)新的動(dòng)畫，我們將用一個(gè)只有home和about頁面的簡(jiǎn)單應(yīng)用來做演示。我們將要用內(nèi)容向左飛出然后用下圖所示的交錯(cuò)進(jìn)入的效果實(shí)現(xiàn)一個(gè)很酷的路由頁面切換

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

首先，我們把下列依賴獨(dú)立引入你的項(xiàng)目：@angular/animations 和 @angular/platform-browser/animations 接下來在項(xiàng)目中的入口模塊的代碼引入 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動(dòng)畫API的瀏覽器 的話：比如IE、Edge、Safari等等。你必須要引入web-animations依賴

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

app.module.ts

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

      
    
  `
})
export class App { }

我們使用靜態(tài)路由來創(chuàng)建不同的導(dǎo)航鏈接。然后我們用routerLinkActive指令來裝飾當(dāng)前的內(nèi)容部分。舉個(gè)例子，如果我們要導(dǎo)航到首頁Home，導(dǎo)航鏈接的標(biāo)簽上將加上active選擇器并根據(jù)這個(gè)渲染對(duì)應(yīng)部分

Home

讓我們改變默認(rèn)的路由變換設(shè)置。首先我們需要加上動(dòng)畫觸發(fā)器屬性 routerTransition ，然后我們綁定@routerTransition在主標(biāo)簽元素上，之后，我們可以裝飾內(nèi)部的路由組件并交由Angular的路由來實(shí)例化

我們可以用一個(gè)div或者其他標(biāo)簽來替換主標(biāo)簽元素，只要它是router-outlet的父結(jié)點(diǎn)

我們用getState方法傳遞外部設(shè)置的參數(shù)來設(shè)置正確的狀態(tài)。這個(gè)方法將返回一個(gè) state 的用于設(shè)置路由定義的屬性。我們接下來看下一個(gè)部分，這個(gè)設(shè)置將允許我們?nèi)タ刂泼總€(gè)路由將執(zhí)行哪種切換

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

app.module.ts

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

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

在Angular里面，路由會(huì)去嘗試匹配路由定義和當(dāng)前的url，同一個(gè)生效的配置優(yōu)先級(jí)由上到下

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
});

路由設(shè)置告訴路由當(dāng)匹配到Home和About頁面的路徑時(shí)去實(shí)例化對(duì)應(yīng)的組件。注意這個(gè)data屬性設(shè)置每個(gè)狀態(tài)給對(duì)應(yīng)的路由。這些狀態(tài)將要去匹配我們?cè)?b>routerTransition中設(shè)置的切換

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

為了這個(gè)例子，因?yàn)镻lunker的原因我們使用一個(gè)哈希定位的策略。如果我們需要后端我們可以沿用普通的路徑跳轉(zhuǎn)，但是如果沒有后端來展示404錯(cuò)誤的話我們就使用這個(gè)策略來重定向未知路徑到index.html

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

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

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

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

這些事件將觸發(fā)一個(gè)動(dòng)畫：

向或者從視圖里裝載或者卸載一個(gè)元素

改變已綁定觸發(fā)器的狀態(tài) 比如：[@routerTransition]="home"

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

首先讓我們看一下如何使用Angular動(dòng)畫來讓內(nèi)容向左滑出

最初，定義我們的觸發(fā)器routerTransition。在這個(gè)實(shí)現(xiàn)中，我們使用了一個(gè)覆蓋所有可能狀態(tài)的通用轉(zhuǎn)換

這是個(gè)通過兩個(gè)獨(dú)立轉(zhuǎn)換* => home 、 * => about完成的重寫

我們可以在我們的轉(zhuǎn)換中用兩個(gè)特殊標(biāo)識(shí) void 和 *來代表：一個(gè)元素尚未被掛載到視圖或者任何狀態(tài)

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 }),
    ])
  ])
])

我們?cè)诘诙€(gè)參數(shù)里定義了一個(gè)順序執(zhí)行通用轉(zhuǎn)換的數(shù)組 。第一個(gè)參數(shù)呢，使用了一個(gè)新的查詢指令去選擇新的路徑組件和離開的組件；查詢指令可以使用類似CSS偽類的選擇器方式選中，比如一些特殊的關(guān)鍵詞：:enter，:leave和*

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

接下來，我們將設(shè)置一個(gè)組合使得內(nèi)部動(dòng)畫同時(shí)執(zhí)行。

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

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

注意這種實(shí)現(xiàn)方式與我們將觸發(fā)器綁定到我們想要?jiǎng)赢嫷脑氐膭?dòng)畫中的用例不同。
這意味著我們不能使用狀態(tài)來對(duì)路由組件進(jìn)行樣式，因?yàn)檫@樣可以將樣式應(yīng)用于父結(jié)點(diǎn)（我們的示例中的主元素），而不是路由組件。

在路由初始化期間，一些查詢指令會(huì)返回空的結(jié)果，為了避免拋出錯(cuò)誤，我們?cè)谒胁樵冎性O(shè)置了可選參數(shù)。

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

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 })),
    ])),
  ])
])

最終，我們使用轉(zhuǎn)換（transform）和透明（opacity）來垂直向上滑動(dòng)進(jìn)入并淡入。
通過使用交錯(cuò)，我們?yōu)槊總€(gè)動(dòng)畫引入了一個(gè)小的延遲（以毫秒為單位），創(chuàng)建了一個(gè)很好的窗簾效果。最后一點(diǎn)，我們不得不引入一個(gè)新的查詢，用（opacity：0）初始化.block元素，這樣當(dāng)組件滑入時(shí)就不會(huì)顯示。

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