Angular如何制作animations动画三?这里有angularjs制作animations动画的详情
程序员文章站
2022-04-08 11:45:23
...
本篇文章为练习的文章,巩固自己的学的成果,现在我们试试做做angularjs中的animations动画三,看看效果。下面就让我们一起来看下去吧
这是前言
文章基于angular的练手项目。文章目录
上一篇文章《Angular练习之animations动画二》中练习了入场和出场动画、 Keyframes实现串联动画、Group实现并行动画。今天练习动画回调函数、query选择器。
开始练习
回调函数
(想看更多就到PHP中文网AngularJS开发手册中学习)
回调用法也是很简单,如下:
<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)'}) ]) )), ]) ]);
源码
源码放在github开源社区上面,随时会更新。所以你下载最新版本的时候会与该文章描述的略有差异。github地址:https://github.com/yiershan/A...
好了,本篇文章到这就结束了(想看更多就到PHP中文网AngularJS使用手册中学习),有问题的可以在下方留言提问。
以上就是Angular如何制作animations动画三?这里有angularjs制作animations动画的详情的详细内容,更多请关注其它相关文章!
上一篇: windows10永久激活密钥有哪些
下一篇: H5实现桌面通知以及提示功能的实例