Angular 路由动画配置

好记性不如烂笔头，这里记录一下如何配置一个简单的Angular router animate

正片开始

第一步：要在app.module.ts引入动画模块

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
imports: [BrowserAnimationsModule,...
]

---

第二步：创建一个文件，这个文件里专门用来设置我们设置的动画效果，我起名为app.animations.ts

import { transition, trigger, style, query, group, animate, keyframes } from '@angular/animations';
export const AppAnimatron = trigger('AppAnimation',[...])

这个文件我稍后会放在最后，就当为大家提供一个简单的页面渐隐渐显的动画代码示例。

注意：这个文件是和app.modules.ts的同级文件

---

第三步：在app.components.ts引入我们的动画文件，并监听路由的改变。

import { Component, OnInit } from '@angular/core';
import { NavigationEnd, Router } from '@angular/router';
import { AppAnimation } from './app.animations';@Component({selector: 'app-root',templateUrl: './app.component.html',styleUrls: ['./app.component.scss'],animations: [AppAnimation]
})export class AppComponent implements OnInit {public routerState = true;public routerStateCode = 'active';constructor(public router: Router) {this.router.events.subscribe(event => {if (event instanceof NavigationEnd) {// 每次路由跳转改变状态this.routerState = !this.routerState;this.routerStateCode = this.routerState ? 'active' : 'inactive';}});}ngOnInit() { }
}

哈。我基本相当于把app.components.ts代码给搬到这里了，

重点代码一个是在@Component()里的animations 另一个就是 constructor里的那一段，会监听路由事件。[说起来这里有点取巧了]

注意：一般来说app.components.ts创建之后，是不会有什么 constructor 的，所以…加上就好了

---

第四步：在app.component.html的路由坑上加上动画。

  <div [@AppAnimation]="routerStateCode"><!-- 所有路由的改变最终都会进入到这个坑里 --><router-outlet></router-outlet></div>

至此，我们的路由动画就算配置完成了。

后续

这种配置方法，省略了在路由里为每一个路由配置data属性，简单一些。

附件：app.animations.ts

import { transition, trigger, style, query, group, animate, keyframes } from '@angular/animations';
export const AppAnimation =trigger('AppAnimation', [transition(':enter', [style({ position: 'absolute' }),animate('0.3s linear')]),transition('* <=> *', [query(':leave',style({ opacity: 0.2, position: 'absolute' }),{ optional: true }),query(':enter',style({ opacity: 0.8, position: 'absolute' }),{ optional: true }),group([query(':leave',animate('0.3s linear',keyframes([style({ opacity: 0.8 }),style({ opacity: 0.6 }),style({ opacity: 0.4 }),style({ opacity: 0.2 }),])),{ optional: true }),query(':enter',animate('0.3s linear',keyframes([style({ opacity: 0.2 }),style({ opacity: 0.4 }),style({ opacity: 0.6 }),style({ opacity: 0.8 }),])),{ optional: true })])])]);