Angularanimations动画练习

回调函数

 <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

/*
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三种属性的区别实例详解

css的animation动画的使用教程

animation实现让云朵飘的动画实例