angular2系列之路由转场动画的示例代码
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'; //Componenttransitionanimations exportconstslideInDownAnimation:AnimationEntryMetadata= //动画触发器名称 trigger('routeAnimation',[ state('*', style({ opacity:1, transform:'translateX(0)' }) ), transition(':enter',[ style({ opacity:0, transform:'translateX(-100%)' }), animate('0.2sease-in') ]), transition(':leave',[ animate('0.5sease-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';
四.至此你可以去浏览器看看效果了,如果没有错误
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持毛票票。