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 相关文章推荐
DOM相关内容速查手册
Feb 07 Javascript
javascript数组操作方法小结和3个属性详细介绍
Jul 05 Javascript
JavaScript中的setUTCDate()方法使用详解
Jun 11 Javascript
JavaScript对数组进行随机重排的方法
Jul 22 Javascript
谈谈我对JavaScript中typeof和instanceof的深入理解
Dec 25 Javascript
基于javascript实现句子翻牌网页版小游戏
Mar 23 Javascript
JavaScript用构造函数如何获取变量的类型名
Dec 23 Javascript
详解vue父子模版嵌套案例
Mar 04 Javascript
浅谈JS如何实现真正的对象常量
Jun 25 Javascript
es6+angular1.X+webpack 实现按路由功能打包项目的示例
Aug 16 Javascript
js打开word文档预览操作示例【不是下载】
May 23 Javascript
js+canvas实现转盘效果(两个版本)
Sep 13 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
Smarty结合Ajax实现无刷新留言本实例
2007/01/02 PHP
Thinkphp实现自动验证和自动完成
2015/12/19 PHP
关于PHP中字符串与多进制转换函数的实例代码
2016/11/03 PHP
浅谈Yii乐观锁的使用及原理
2017/07/25 PHP
PHP策略模式定义与用法示例
2017/07/27 PHP
PHP实现简易计算器功能
2020/08/28 PHP
flash javascript之间的通讯方法小结
2008/12/20 Javascript
iframe 自适应高度[在IE6 IE7 FF下测试通过]
2009/04/13 Javascript
innerText和innerHTML 一些问题分析
2009/05/18 Javascript
jQuery 动画弹出窗体支持多种展现方式
2010/04/29 Javascript
NodeJS 模块开发及发布详解分享
2012/03/07 NodeJs
JS判断元素为数字的奇异写法分享
2012/08/01 Javascript
javascript定义变量时有var和没有var的区别探讨
2014/07/21 Javascript
JQuery鼠标移到小图显示大图效果的方法
2015/06/10 Javascript
JS DOMReady事件的六种实现方法总结
2016/11/23 Javascript
jQuery+CSS实现的table表格行列转置功能示例
2018/01/08 jQuery
Vue CLI3 如何支持less的方法示例
2018/08/29 Javascript
node中的session的具体使用
2018/09/14 Javascript
vue router导航守卫(router.beforeEach())的使用详解
2019/04/19 Javascript
vue轻量级框架无法获取到vue对象解决方法
2019/05/12 Javascript
JavaScript中while循环的基础使用教程
2020/08/11 Javascript
Python探索之Metaclass初步了解
2017/10/28 Python
python实现求解列表中元素的排列和组合问题
2018/03/15 Python
python逐行读写txt文件的实例讲解
2018/04/03 Python
OpenCV 轮廓检测的实现方法
2019/07/03 Python
简单了解python 邮件模块的使用方法
2019/07/24 Python
Django 对IP访问频率进行限制的例子
2019/08/30 Python
PyCharm2018 安装及破解方法实现步骤
2019/09/09 Python
HTML5 UTF-8 中文乱码的解决方法
2013/11/18 HTML / CSS
Belle Maison倍美丛官网:日本千趣会旗下邮购网站
2016/07/22 全球购物
Stutterheim瑞典:瑞典高级外套时装品牌
2019/06/24 全球购物
商务英语专业应届毕业生求职信
2013/10/28 职场文书
违反校纪校规检讨书
2014/02/15 职场文书
大学生活动总结怎么写
2014/04/29 职场文书
先进典型发言材料
2014/12/30 职场文书
pytorch通过训练结果的复现设置随机种子
2021/06/01 Python