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


Posted in Javascript onAugust 30, 2017

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

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

Javascript 相关文章推荐
40个有创意的jQuery图片、内容滑动及弹出插件收藏集之一
Dec 31 Javascript
Javascript实现重力弹跳拖拽运动效果示例
Jun 28 Javascript
javascript获取select的当前值示例代码(兼容IE/Firefox/Opera/Chrome)
Dec 17 Javascript
Javascript快速排序算法详解
Dec 03 Javascript
简述JavaScript中正则表达式的使用方法
Jun 15 Javascript
Angular项目从新建、打包到nginx部署全过程记录
Dec 09 Javascript
细说webpack源码之compile流程-入口函数run
Dec 26 Javascript
vue生命周期和react生命周期对比【推荐】
Sep 19 Javascript
Vue绑定内联样式问题
Oct 17 Javascript
发布一款npm包帮助理解npm的使用
Jan 03 Javascript
JavaScript鼠标拖拽事件详解
Apr 03 Javascript
uni-app 微信小程序授权登录的实现步骤
Feb 18 Javascript
浅谈Vue.js应用的四种AJAX请求数据模式
Aug 30 #Javascript
如何理解Vue的render函数的具体用法
Aug 30 #Javascript
微信小程序之发送短信倒计时功能
Aug 30 #Javascript
使用node.js对音视频文件加密的实例代码
Aug 30 #Javascript
hammer.js实现图片手势放大效果
Aug 29 #Javascript
js禁止表单重复提交
Aug 29 #Javascript
View.post() 不靠谱的地方你知道多少
Aug 29 #Javascript
You might like
下载文件的点击数回填
2006/10/09 PHP
php中常用的预定义变量小结
2012/05/09 PHP
php并发对MYSQL造成压力的解决方法
2013/02/21 PHP
php合并js请求的例子
2013/11/01 PHP
详解PHP执行定时任务的实现思路
2015/12/21 PHP
javascript,jquery闭包概念分析
2010/06/19 Javascript
让元素在网页中可拖动示例代码
2013/08/13 Javascript
javascript在子页面中函数无法调试问题解决方法
2014/01/17 Javascript
js的正则test,match,exec详细解析
2014/01/29 Javascript
使用node.js 获取客户端信息代码分享
2014/11/26 Javascript
js调用百度地图及调用百度地图的搜索功能
2015/09/07 Javascript
JS实现无限级网页折叠菜单(类似树形菜单)效果代码
2015/09/17 Javascript
sso跨域写cookie的一段js脚本(推荐)
2016/05/25 Javascript
使用jQuery Rotare实现微信大转盘抽奖功能
2016/06/20 Javascript
EditPlus中的正则表达式 实战(2)
2016/12/15 Javascript
JQuery ZTree使用方法详解
2017/01/07 Javascript
JavaScript实现移动端轮播效果
2017/06/06 Javascript
jq源码解析之绑在$,jQuery上面的方法(实例讲解)
2017/10/13 jQuery
浅析JS中回调函数及用法
2018/07/25 Javascript
vue2和vue3的v-if与v-for优先级对比学习
2020/10/10 Javascript
vue使用Sass时报错问题的解决方法
2020/10/14 Javascript
[02:43]DOTA2英雄基础教程 半人马战行者
2014/01/13 DOTA
Python 检查数组元素是否存在类似PHP isset()方法
2014/10/14 Python
Python实现的连接mssql数据库操作示例
2018/08/17 Python
python bmp转换为jpg 并删除原图的方法
2018/10/25 Python
python Tkinter版学生管理系统
2019/02/20 Python
python中的print()输出
2019/04/12 Python
使用matlab 判断两个矩阵是否相等的实例
2020/05/11 Python
CSS3 2D模拟实现摩天轮旋转效果
2016/11/16 HTML / CSS
HTML5 canvas基本绘图之绘制线段
2016/06/27 HTML / CSS
园林毕业生自我鉴定范文
2013/12/29 职场文书
大三学习计划书范文
2014/05/02 职场文书
导游词300字
2015/02/13 职场文书
换届选举主持词
2015/07/03 职场文书
企业年会祝酒词
2015/08/11 职场文书
springboot如何接收application/x-www-form-urlencoded类型的请求
2021/11/02 Java/Android