## 一、創建并編寫動畫文件 >[info] 在根目錄src/app/下創建一個animations.ts。內容如下： ``` import { trigger, animateChild, group, transition, animate, style, query } from '@angular/animations'; // Routable animations export const slideInAnimation = trigger('routeAnimation', [ transition('heroes <=> hero', [ style({ position: 'relative' }), query(':enter, :leave', [ style({ position: 'absolute', top: 0, left: 0, width: '100%' }) ]), query(':enter', [ style({ left: '-100%'}) ]), query(':leave', animateChild()), group([ query(':leave', [ animate('300ms ease-out', style({ left: '100%'})) ]), query(':enter', [ animate('300ms ease-out', style({ left: '0%'})) ]) ]), query(':enter', animateChild()), ]) ]); ``` ## 二、引入動畫 1.在跟模塊中引入BrowserAnimationsModule模塊并聲明 ``` import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; @NgModule({ imports: [ BrowserAnimationsModule, ], }) ``` 2.在特征路由中的data屬性添加`animation` ``` const heroesRoutes: Routes = [ { path: 'heroes', component: HeroListComponent, data: { animation: 'heroes' } //添加animation: }, { path: 'hero/:id', component: HeroDetailComponent, data: { animation: 'hero' } //添加animation: } ]; ``` 3.在跟組件中把 animations 數組添加到 @Component 的元數據中。 ``` import { RouterOutlet } from '@angular/router'; import { slideInAnimation } from './animations'; @Component({ selector: 'app-root', templateUrl: 'app.component.html', styleUrls: ['app.component.css'], animations: [ slideInAnimation ] }) ``` ## 三、使用動畫 > 為了使用路由動畫，你需要把 RouterOutlet 包裝到一個元素中。你要把 @routeAnimation 觸發器綁定到該元素上。 為了把 @routeAnimation 轉場轉場到指定的狀態，你需要從 ActivatedRoute 的 data 中提供它。 RouterOutlet 導出成了一個模板變量 outlet，這樣你就可以綁定一個到路由出口的引用了。給這個變量取名做 routerOutlet 是一個理想的選擇 1.在跟根組件模板中 ``` <h1>Angular Router</h1> <nav> <a routerLink="/crisis-center" routerLinkActive="active">Crisis Center</a> <a routerLink="/heroes" routerLinkActive="active">Heroes</a> </nav> <div [@routeAnimation]="getAnimationData(routerOutlet)"> <router-outlet #routerOutlet="outlet"></router-outlet> </div> ``` 2.在跟根組件邏輯中 > @routeAnimation 屬性綁定到了 getAnimationData 和 routerOutlet 的引用，因此你需要在 AppComponent 中定義那個函數。getAnimationData 函數根據 ActivatedRoute 所提供的 data 對象返回動畫的屬性。animation 屬性會匹配你在 animations.ts 中定義 slideDownAnimation 時使用的 transition 名稱。 ``` export class AppComponent { getAnimationData(outlet: RouterOutlet) { return outlet && outlet.activatedRouteData && outlet.activatedRouteData['animation']; } } ```