前言

文章基于angular的练手项目。

上一篇文章 中练习了入场和出场动画、 Keyframes实现串联动画、Group实现并行动画。今天练习动画回调函数、query选择器。

开始练习

回调函数

回调用法也是很简单，如下：

    
  
    
  Callback(f:boolean){    if(f){      console.log("动画开始");    }else {      console.log("动画结束");    }  }

query

用法和css选择器大致相同,通过query便可以实现不同元素实现不同的动画效果。

/*query选择器演示用法和css选择器大致相同 */export const QueryAnimate = trigger('QueryAnimate',[    transition('off=>on', [      // 先全部隐藏      query('div', 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开源社区上面，随时会更新。所以你下载最新版本的时候会与该文章描述的略有差异。