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