angular2系列之路由转场动画的示例代码


Posted in Javascript onNovember 09, 2017

Angular2的动画系统赋予了制作各种动画效果的能力,致力于构建出与原生CSS动画性能相同的动画。

Angular2的动画主要是和@Component结合在了一起。

animations元数据属性在定义@Component装饰。就像template元数据属性!这样就可以让动画逻辑与其应用代码紧紧集成在一起,这让动画可以更容易的出发与控制。

一.在app.mudule.ts中引入:

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

并在@NgModule中的imports添加:

imports: [BrowserAnimationsModule],

二.创建文件定义名为animations.ts用来书写转场动画

import { animate, AnimationEntryMetadata, state, style, transition, trigger } from'@angular/core';
// Component transition animations
export const slideInDownAnimation: AnimationEntryMetadata =
// 动画触发器名称
trigger('routeAnimation', [
  state('*',
    style({
      opacity: 1,
      transform: 'translateX(0)'
    })
  ),
  transition(':enter', [
    style({
      opacity: 0,
      transform: 'translateX(-100%)'
    }),
    animate('0.2s ease-in')
  ]),
  transition(':leave', [
    animate('0.5s ease-out', style({
      opacity: 0,
      transform: 'translateY(100%)'
    }))
  ])
]);

三.在需要添加转场动画的页面操作

引入import {HostBinding } from '@angular/core';(如果引入过直接将HostBinding添加进去就好,不要重复引入,多嘴了...)

再引入你写好的动画模板:import { slideInDownAnimation } from '../animation';

在@Component中添加:animations:[slideInDownAnimation],

最后:

// 添加@HostBinding属性添加到类中以设置这个路由组件元素的动画和样式
  @HostBinding('@routeAnimation') routeAnimation = true;
  @HostBinding('style.display') display = 'block';
  @HostBinding('style.position') position = 'absolute';

四.至此你可以去浏览器看看效果了,如果没有错误

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

Javascript 相关文章推荐
FF IE兼容性的修改小结
Sep 02 Javascript
原生Js与jquery的多组处理, 仅展开一个区块的折叠效果
Jan 09 Javascript
JavaScript高级程序设计(第3版)学习笔记4 js运算符和操作符
Oct 11 Javascript
js加载读取内容及显示与隐藏div示例
Feb 13 Javascript
js实现网站最上边可关闭的浮动广告条代码
Sep 04 Javascript
深入理解vue2.0路由如何配置问题
Jul 18 Javascript
Vue2.0点击切换类名改变样式的方法
Aug 22 Javascript
详解ES6中的Map与Set集合
Mar 22 Javascript
Vue批量图片显示时遇到的路径被解析问题
Mar 28 Javascript
Js实现粘贴上传图片的原理及示例
Dec 09 Javascript
JavaScript 实现页面滚动动画
Apr 24 Javascript
Vue OpenLayer测距功能的实现
Apr 20 Vue.js
使用ef6创建oracle数据库的实体模型遇到的问题及解决方案
Nov 09 #Javascript
基于vue配置axios的方法步骤
Nov 09 #Javascript
微信小程序倒计时功能实现代码
Nov 09 #Javascript
js与jQuery实现的用户注册协议倒计时功能实例【三种方法】
Nov 09 #jQuery
微信小程序获取手机号授权用户登录功能
Nov 09 #Javascript
jQuery.Sumoselect插件实现下拉复选框效果
Nov 09 #jQuery
webpack中CommonsChunkPlugin详细教程(小结)
Nov 09 #Javascript
You might like
使用Apache的htaccess防止图片被盗链的解决方法
2013/04/27 PHP
tp5框架前台无限极导航菜单类实现方法分析
2020/03/29 PHP
php中get_object_vars()在数组的实例用法
2021/02/22 PHP
JavaScript的面向对象方法以及差别
2008/03/31 Javascript
js获取class的所有元素
2013/03/28 Javascript
使用原生js实现页面蒙灰(mask)效果示例代码
2014/06/20 Javascript
JavaScript中的函数重载深入理解
2014/08/04 Javascript
JavaScript字符串对象substr方法入门实例(用于截取字符串)
2014/10/16 Javascript
触屏中的JavaScript事件分析
2015/02/06 Javascript
jQuery插件实现文字无缝向上滚动效果代码
2016/02/25 Javascript
JS作用域链详解
2017/06/26 Javascript
vue.js源代码core scedule.js学习笔记
2017/07/03 Javascript
EasyUI创建人员树的实例代码
2017/09/15 Javascript
vue配置请求本地json数据的方法
2018/04/11 Javascript
使用JS实现导航切换时高亮显示的示例讲解
2018/08/22 Javascript
vue项目中使用tinymce编辑器的步骤详解
2018/09/11 Javascript
this在vue和小程序中的使用详解
2019/01/28 Javascript
node.js命令行教程图文详解
2019/05/27 Javascript
优雅的处理vue项目异常实战记录
2019/06/05 Javascript
从零撸一个pc端vue的ui组件库( 计数器组件 )
2019/08/08 Javascript
关于Node.js中频繁修改代码重启服务器的问题
2020/10/15 Javascript
用Python制作简单的钢琴程序的教程
2015/04/01 Python
详解Python中for循环的使用
2015/04/14 Python
python 性能优化方法小结
2017/03/31 Python
python获取代码运行时间的实例代码
2018/06/11 Python
wxpython多线程防假死与线程间传递消息实例详解
2019/12/13 Python
Python流程控制常用工具详解
2020/02/24 Python
Python 如何查找特定类型文件
2020/08/17 Python
python自动生成sql语句的脚本
2021/02/24 Python
双立人美国官方商店:ZWILLING集团餐具和炊具
2020/05/07 全球购物
高校教师岗位职责
2014/03/18 职场文书
如何写自我鉴定
2014/03/19 职场文书
国际商务专业求职信
2014/07/15 职场文书
共产党员批评与自我批评
2014/10/15 职场文书
婚宴父亲致辞
2015/07/27 职场文书
2016年党员岗位承诺书
2016/03/24 职场文书