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';
四.至此你可以去浏览器看看效果了,如果没有错误
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。