微客导航 » 文章资讯 » angular4 如何在全局设置路由跳转动画的方法

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

2023-09-25 14:47:06 196

最近用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';

exportconstrouteAnimation:AnimationEntryMetadata=
trigger('routeAnimation',[
transition(':enter',[
style({
position:'absolute'
}),
animate('0.5sease-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('.5sease-in-out',style({transform:'translateX(-100%)'})),{optional:true}),
query(':enter',animate('.5sease-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(eventinstanceofNavigationEnd){
//每次路由跳转改变状态
this.routerState=!this.routerState;
this.routerStateCode=this.routerState?'active':'inactive';
}
});

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

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

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

返回顶部
3162201930
czq8825@qq.com

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

热门推荐

随机推荐