欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-04-09 22:20:46
最近用angular4写项目需要为每次路由跳转增加动画,看了一下官方文档,虽然可以实现,但是要每个组件都引入一次animations,比较麻烦,找网上也查阅了很多资料,但是...

最近用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。

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