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 相关文章推荐
jQuery学习笔记之DOM对象和jQuery对象
Dec 22 Javascript
jQuery性能优化的38个建议
Mar 04 Javascript
JavaScript中实现最高效的数组乱序方法
Oct 11 Javascript
举例详解Python中smtplib模块处理电子邮件的使用
Jun 24 Javascript
jquery mobile开发常见问题分析
Jan 21 Javascript
jQuery ztree实现动态树形多选菜单
Aug 12 Javascript
JavaScript实现图片无缝滚动效果
Jul 07 Javascript
JavaScript日期工具类DateUtils定义与用法示例
Sep 03 Javascript
提升node.js中使用redis的性能遇到的问题及解决方法
Oct 30 Javascript
记录微信小程序 height: calc(xx - xx);无效问题
Dec 30 Javascript
微信小程序 button样式设置为图片的方法
Jun 19 Javascript
解决vue组件销毁之后计时器继续执行的问题
Jul 21 Javascript
使用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
PHP生成HTML静态页面实例代码
2008/08/31 PHP
PHP内核探索之变量
2015/12/22 PHP
PHP操作MySQL中BLOB字段的方法示例【存储文本与图片】
2017/09/15 PHP
在IE下:float属性会影响offsetTop的取值
2006/12/22 Javascript
extjs grid取到数据而不显示的解决
2008/12/29 Javascript
JAVASCRIPT  THIS详解 面向对象
2009/03/25 Javascript
jquery $.ajax()取xml数据的小问题解决方法
2010/11/20 Javascript
在图片上显示左右箭头类似翻页的代码
2013/03/04 Javascript
简单的ajax连接库分享(不用jquery的ajax)
2014/01/19 Javascript
jquery实现TAB选项卡鼠标经过带延迟效果的方法
2015/07/27 Javascript
Spring mvc 接收json对象
2015/12/10 Javascript
为Jquery EasyUI 组件加上清除功能的方法(详解)
2017/04/13 jQuery
node.js(express)中使用Jcrop进行图片剪切上传功能
2017/04/21 Javascript
javascript 中的继承实例详解
2017/05/05 Javascript
Jquery把获取到的input值转换成json
2017/05/15 jQuery
js贪心算法 钱币找零问题代码实例
2019/09/11 Javascript
vuex存取值和映射函数使用说明
2020/07/24 Javascript
numpy使用fromstring创建矩阵的实例
2018/06/15 Python
78行Python代码实现现微信撤回消息功能
2018/07/26 Python
Python设计模式之备忘录模式原理与用法详解
2019/01/15 Python
对PyQt5中树结构的实现方法详解
2019/06/17 Python
Python中字符串List按照长度排序
2019/07/01 Python
python从内存地址上加载python对象过程详解
2020/01/08 Python
Python Handler处理器和自定义Opener原理详解
2020/03/05 Python
Python 字节流,字符串,十六进制相互转换实例(binascii,bytes)
2020/05/11 Python
python定时截屏实现
2020/11/02 Python
CSS3利用text-shadow属性实现多种效果的文字样式展现方法
2016/08/25 HTML / CSS
Expedia挪威官网:酒店、机票和租车
2018/03/03 全球购物
iHerb中文官网:维生素、保健品和健康产品
2018/11/01 全球购物
JSF面试题:Jsf中导航的标签是什么
2013/04/20 面试题
关于毕业的广播稿
2014/01/10 职场文书
见习期自我鉴定
2014/01/31 职场文书
《和我们一样享受春天》教学反思
2014/02/07 职场文书
美术教师个人工作总结
2015/02/06 职场文书
导游词之上海东方明珠塔
2019/09/25 职场文书
Python操作CSV格式文件的方法大全
2021/07/15 Python