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 相关文章推荐
js 左右悬浮对联广告特效代码
Dec 12 Javascript
简介JavaScript中POSITIVE_INFINITY值的使用
Jun 05 Javascript
对称加密与非对称加密优缺点详解
Feb 06 Javascript
浅谈pc端rem字体设置的问题
Aug 03 Javascript
js 两个日期比较相差多少天的实例
Oct 19 Javascript
详解如何将 Vue-cli 改造成支持多页面的 history 模式
Nov 20 Javascript
浅谈SpringMVC中post checkbox 多选框value的值(隐藏域方式)
Jan 08 Javascript
Node.js中的cluster模块深入解读
Jun 11 Javascript
JavaScript 中的 this 工作原理
Jun 20 Javascript
JQuery animate动画应用示例
May 14 jQuery
浅谈vue限制文本框输入数字的正确姿势
Sep 02 Javascript
VUE+elementui组件在table-cell单元格中绘制微型echarts图
Apr 20 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对文件夹递归执行chmod命令的方法
2015/06/19 PHP
thinkphp3.x自定义Action、Model及View的简单实现方法
2016/05/19 PHP
laravel框架中路由设置,路由参数和路由命名实例分析
2019/11/23 PHP
ExtJS 简介 让你知道extjs是什么
2008/12/29 Javascript
Jquery 基础学习笔记之文档处理
2009/05/29 Javascript
jQuery 打造动态下滑菜单实现说明
2010/04/15 Javascript
Eclipse去除js(JavaScript)验证错误
2014/02/11 Javascript
js获取当前地址 JS获取当前URL的示例代码
2014/02/26 Javascript
jQuery学习笔记之jQuery中的$
2015/01/19 Javascript
jQuery实现宽屏图片轮播实例教程
2015/11/24 Javascript
javascript的replace方法结合正则使用实例总结
2016/06/16 Javascript
js学习总结之dom2级事件基础知识详解
2017/07/27 Javascript
js禁止浏览器页面后退功能的实例(推荐)
2017/09/01 Javascript
解决Jstree 选中父节点时被禁用的子节点也会选中的问题
2017/12/27 Javascript
关于vue面试题汇总
2018/03/20 Javascript
VuePress 静态网站生成方法步骤
2019/02/14 Javascript
vue实现路由切换改变title功能
2019/05/28 Javascript
laravel实现中文和英语互相切换的例子
2019/09/30 Javascript
JavaScript制作3D旋转相册
2020/08/02 Javascript
javascript+css实现进度条效果
2020/03/25 Javascript
微信小程序12行js代码自己写个滑块功能(推荐)
2020/07/15 Javascript
浅谈python中set使用
2016/06/30 Python
详解用TensorFlow实现逻辑回归算法
2018/05/02 Python
浅谈Pandas:Series和DataFrame间的算术元素
2018/12/22 Python
python3使用QQ邮箱发送邮件
2020/05/20 Python
Python基础教程之输入输出和运算符
2020/07/26 Python
详解KMP算法以及python如何实现
2020/09/18 Python
python palywright库基本使用
2021/01/21 Python
CSS3 分类菜单效果
2019/05/27 HTML / CSS
科茨沃尔德家居商店:Scotts of Stow
2018/06/29 全球购物
全球最大化妆品零售网站:SkinStore
2020/10/24 全球购物
2014年教研活动总结范文
2014/04/26 职场文书
教师党员承诺书2015
2015/01/21 职场文书
新闻简讯格式及范文
2015/07/22 职场文书
素质教育培训心得体会
2016/01/19 职场文书
2016年第二十届“母亲节暨幸福工程救助贫困母亲活动日”活动总结
2016/04/06 职场文书