一.在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';
大家学会了吗?赶紧动手尝试一下吧。
相关推荐:
以上就是angular2路由转场动画实例讲解的详细内容,更多请关注php中文网其它相关文章!
![php中文网最新课程二维码](/static/images/article_wechat2021.jpg?1111)
声明:本文原创发布php中文网,转载请注明出处,感谢您的尊重!如有疑问,请联系admin@php.cn处理
网友评论
文明上网理性发言,请遵守 新闻评论服务协议
我要评论