Angular框架中路由切换时的动画效果添加（routeAnim

Angular框架中可以给路由切换时添加动画效果，在切换路由导航时，Router会将URL映射到对应的组件，因此，在切换路由的时候可以添加动画效果。

1、路由代码部分：

首先要找到视图加载的路由文件，给对应的路由文件下的每个路由中添加一个data对象，data中使用animationName属性，进行唯一的标识。
data属性中的animationName是任意的，可以根据需要设置不同的名称

const routes: Routes = [
  {
    path: '',
    component:DefaultComponent,
    children:[
      {
        path:'home',
        component:HomeComponent,
        data: {animationName: 'home'}
      },
      {
        path:'report',
        component:ReportComponent,
        data: {animationName: 'report'}
      },
      {
        path:'keywords',
        component:KeywordsComponent,
        data: {animationName: 'keywords'}
      },  
      {
        path:'alarm',
        component:AlarmComponent,
        data: {animationName: 'alarm'}
      }
    ]
  }
];

2、模板代码部分：

模板中使用的是router-outlet视图占位符，在这一块，占位符的父级我们要加上一个[@routeAnimations]="animationRoute(outletInfo)"，routeAnimations是动画触发器的名称，animationRoute是一个方法，需要单独在组件ts代码那边去定义函数体，方法animationRoute在视图发生变化调用，这个方法给触发器返回当前激活的路由的data中的animationName。
占位符中也需要添加上#outletInfo='outlet'，使用outlet属性型指令，可以获得当前激活的路由及其状态的数据还有之前在路由中配置的data属性。

<div class="inner-content" [@routeAnimations]="animationRoute(outletInfo)">
   <!-- 视图占位显示 -->
   <router-outlet #outletInfo="outlet"></router-outlet>
</div>

animationRoute方法：

  animationRoute(outlet: RouterOutlet) {
    return outlet && outlet.activatedRouteData && outlet.activatedRouteData['animationName'];
  }

3、动画部分处理：

首先创建一个公共的animations文件夹，以便后期会进行动画复用。然后在这个文件夹下创建一个animation-route.ts，代码：

import {animate, animateChild, group, query, style, transition, trigger} from '@angular/animations';

export const AnimationRoute =
trigger('routeAnimations', [
transition('* <=> *', [
  style({position: 'relative'}),
  query(':enter, :leave', [
    style({
      position: 'absolute',
      left:0,
      top:0,
      width: '100%'
    })
  ], {optional: true}),
  query(':enter', [
    style({left: '0'})
  ], {optional: true}),
  query(':leave', animateChild(), {optional: true}),
  group([
    query(':leave', [
      animate('300ms ease-in', style({left: '10%',opacity:0}))
    ], {optional: true}),
    query(':enter', [
      animate('300ms ease-in', style({left: 0,opacity:0}))
    ], {optional: true})
  ]),
  query(':enter', animateChild(), {optional: true}),
])
]);

各方法的简要说明：

需要加上{optional: true},设置query()查询是可选的，否则在查询不到的情况下会报错

4、使用动画

修改ts代码中的元数据的属性

import { Component, OnInit } from '@angular/core';
import { RouterOutlet } from '@angular/router';
import { AnimationRoute } from 'src/animations/animation-route';

@Component({
  selector: 'app-default',
  templateUrl: './default.component.html',
  styleUrls: ['./default.component.less'],
  animations: [AnimationRoute]
})