路由动画 · Angular学习文档

## 一、创建并编写动画文件 >[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']; } } ```