angular4 如何在全局设置路由跳转动画的方法

作者: 贫道法号胜少
来源: 51数据库
2021-08-26

最近用angular4写项目需要为每次路由跳转增加动画，看了一下官方文档，虽然可以实现，但是要每个组件都引入一次animations，比较麻烦，找网上也查阅了很多资料，但是都没找到适用的方法，最后自己写了一种方法如下：

首先在app.module中导入browseranimationsmodule

import { browseranimationsmodule } from '@angular/platform-browser/animations';

@ngmodule({
 imports: [
  browseranimationsmodule

在根目录src/app/下创建一个animations.ts。内容如下，这里我用到query和group是想两个页面来回切换有过度痕迹

import { animationentrymetadata, state } from '@angular/core';
import { trigger, transition, animate, style, query, group } from '\@angular/animations';

export const routeanimation: animationentrymetadata =
 trigger('routeanimation', [
  transition(':enter', [
   style({
    position: 'absolute'
   }),
   animate('0.5s ease-in-out')
  ]),
  transition('* => *', [
   query(':leave', style({ transform: 'translatex(0)', position: 'absolute'}), { optional: true }),
   query(':enter', style({ transform: 'translatex(100%)', position: 'absolute'}), { optional: true }),

   group([
    query(':leave', animate('.5s ease-in-out', style({transform: 'translatex(-100%)'})), { optional: true }),
    query(':enter', animate('.5s ease-in-out', style({transform: 'translatex(0)'})), { optional: true })
   ])
  ])
 ]);

接着在app.component中使用 navigationend 设置每次路由跳转监听的参数变化并且引入animations模块

import { router, navigationend } from '@angular/router';
import { routeanimation } from './animations';

@component({
 selector: 'app-root',
 templateurl: './app.component.html',
 styleurls: ['./app.component.less'],
 animations: [routeanimation]
})
// router跳转动画所需参数
 routerstate: boolean = true;
 routerstatecode: string = 'active';

this.router.events.subscribe(event => {
   if (event instanceof navigationend) {
    // 每次路由跳转改变状态
   this.routerstate = !this.routerstate;
   this.routerstatecode = this.routerstate ? 'active' : 'inactive';
   }
  });

最后在app.component.html中声明路由动画就可以了

<div id="app" [@routeanimation]="routerstatecode">
 <router-outlet></router-outlet>
</div>

现在全局路由跳转都有动画了，不用一个一个组件导入animations。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。