<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选择器大致相同 */ 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实现让云朵飘的动画实例