Angular animations动画练习
程序员文章站
2022-04-08 11:43:21
...
Angular2的动画系统赋予了制作各种动画效果的能力,致力于构建出与原生CSS动画性能相同的动画。
Angular2的动画主要是和@Component结合在了一起。
animations元数据属性在定义@Component装饰。就像template元数据属性!这样就可以让动画逻辑与其应用代码紧紧集成在一起,这让动画可以更容易的出发与控制
回调函数
回调用法也是很简单,如下:
<p *ngIf="Group" style="height: 100px;width: 100px;background-color: black; border-radius: 50px;" [@GroupAnimate]="boxState" (@GroupAnimate.done)="Callback(false)" (@GroupAnimate.start)="Callback(true)"> </p> Callback(f:boolean){ if(f){ console.log("动画开始"); }else { console.log("动画结束"); } }
query
用法和css选择器大致相同,通过query便可以实现不同元素实现不同的动画效果。
/* query选择器演示 用法和css选择器大致相同 */ export const QueryAnimate = trigger('QueryAnimate',[ transition('off=>on', [ // 先全部隐藏 query('p', style({ opacity: 0 })), // 再执行动画 query('.box-top', animate('500ms',keyframes([ style({opacity: 0, transform: 'translateY(-400%)', offset: 0}), style({opacity: 1, transform: 'translateY(0)', offset: 1.0}) ]) )), query('.box-center', animate('500ms',keyframes([ style({opacity: 0, transform: 'translateX(-400%)', offset: 0}), style({opacity: 1, transform: 'translateX(0)', offset: 1.0}) ]) )), query('.box-foot', animate('500ms',keyframes([ style({opacity: 0, transform: 'translateY(400%)', offset: 0}), style({opacity: 1, transform: 'translateY(0)', offset: 1.0}) ]) )), query('h2', animate('500ms',keyframes([ style({transform:'scale(0.5)'}), style({transform: 'scale(1)'}) ]) )), ]), transition('on=>off', [ query('.box-top', animate('500ms',keyframes([ style({opacity: 1, transform: 'translateY(0)'}), style({opacity: 0, transform: 'translateY(-400%)'}) ]) )), query('.box-center', animate('500ms',keyframes([ style({opacity: 1, transform: 'translateX(0)'}), style({opacity: 0, transform: 'translateX(-400%)'}) ]) )), query('.box-foot', animate('500ms',keyframes([ style({opacity: 1, transform: 'translateY(0)'}), style({opacity: 0, transform: 'translateY(400%)'}) ]) )), query('h2', animate('500ms',keyframes([ style({transform:'scale(1)'}), style({transform: 'scale(0.5)'}) ]) )), ]) ]);
相关推荐;
CSS3中transform、transition和animationsan三种属性的区别实例详解
以上就是Angular animations动画练习的详细内容,更多请关注其它相关文章!