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 相关文章推荐
javascript 面向对象编程基础 多态
Aug 21 Javascript
jQuery中的bind绑定事件与文本框改变事件的临时解决方法
Aug 13 Javascript
IE6下通过a标签点击切换图片的问题
Nov 14 Javascript
ExtJS4中的requires使用方法示例介绍
Dec 03 Javascript
jQuery中trigger()方法用法实例
Jan 19 Javascript
JavaScript通过prototype给对象定义属性用法实例
Mar 23 Javascript
js实现简单折叠、展开菜单的方法
Aug 28 Javascript
jquery网页日历显示控件calendar3.1使用详解
Nov 24 Javascript
JS+DIV实现的卷帘效果示例
Mar 22 Javascript
layui下拉框获取下拉值(select)的例子
Sep 10 Javascript
小程序使用wxs解决wxml保留2位小数问题
Dec 13 Javascript
JS前端轻量fabric.js系列物体基类
Aug 05 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
php 传值赋值与引用赋值的区别
2010/12/29 PHP
PHP的Yii框架中使用数据库的配置和SQL操作实例教程
2016/03/17 PHP
11个用于提高排版水平的基于jquery的文字效果插件
2012/09/14 Javascript
JavaScript定时器详解及实例
2013/08/01 Javascript
javascript中全局对象的isNaN()方法使用介绍
2013/12/19 Javascript
javaScript对文字按照拼音排序实现代码
2013/12/27 Javascript
nodejs获取本机内网和外网ip地址的实现代码
2014/06/01 NodeJs
JavaScript中使用Math.PI圆周率属性的方法
2015/06/14 Javascript
JS模拟按钮点击功能的方法
2015/12/22 Javascript
浅谈js的html元素的父节点,子节点
2016/08/06 Javascript
AngularJS表单验证中级篇(3)
2016/09/28 Javascript
ajax的分页查询示例(不刷新页面)
2017/01/11 Javascript
node.js实现复制文本到剪切板的功能
2017/01/23 Javascript
JS动态修改网页body的背景色实例代码
2017/10/07 Javascript
vue插件draggable实现拖拽移动图片顺序
2018/12/01 Javascript
用node.js写一个jenkins发版脚本
2019/05/21 Javascript
vue 使用 vue-pdf 实现pdf在线预览的示例代码
2020/04/26 Javascript
python元组操作实例解析
2014/09/23 Python
Python中最常用的操作列表的几种方法归纳
2015/04/24 Python
在Python中使用列表生成式的教程
2015/04/27 Python
进一步探究Python的装饰器的运用
2015/05/05 Python
python下如何查询CS反恐精英的服务器信息
2017/01/17 Python
Python单例模式的两种实现方法
2017/08/14 Python
Python实现嵌套列表去重方法示例
2017/12/28 Python
深入浅析Python中的yield关键字
2018/01/24 Python
Python cookbook(数据结构与算法)将序列分解为单独变量的方法
2018/02/13 Python
wxPython绘图模块wxPyPlot实现数据可视化
2019/11/19 Python
Python调用Windows命令打印文件
2020/02/07 Python
Python学习之路之pycharm的第一个项目搭建过程
2020/06/18 Python
沃尔玛加拿大:Walmart.ca
2020/03/02 全球购物
"引用"与指针的区别是什么
2016/09/07 面试题
善意的谎言事例
2014/02/15 职场文书
产品售后服务承诺书
2014/05/21 职场文书
党员争先创优承诺书
2015/01/20 职场文书
2016高考感言
2015/08/01 职场文书
SqlServer: 如何更改表的文件组?(进而改变存储位置)
2021/04/05 SQL Server