返回目录

前言

文章基于angular的练手项目。 文章目录
上一篇文章 《Angular练习之animations动画二》中练习了入场和出场动画、 Keyframes实现串联动画、Group实现并行动画。今天练习动画回调函数、query选择器。

开始练习

回调函数

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

<div *ngIf="Group" style="height: 100px;width: 100px;background-color: black; border-radius: 50px;"
       [@GroupAnimate]="BoxState" (@GroupAnimate.done)="Callback(false)" (@GroupAnimate.start)="Callback(true)">
  </div>


  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',transform: 'translateX(-400%)',transform: 'translateX(0)',query('.Box-foot',transform: 'translateY(400%)',query('h2',keyframes([
        style({transform:'scale(0.5)'}),style({transform: 'scale(1)'})
      ]) )),]),transition('on=>off',[
      query('.Box-top',keyframes([
        style({opacity: 1,transform: 'translateY(0)'}),style({opacity: 0,transform: 'translateY(-400%)'})
      ]) )),transform: 'translateX(0)'}),transform: 'translateX(-400%)'})
      ]) )),transform: 'translateY(400%)'})
      ]) )),keyframes([
        style({transform:'scale(1)'}),style({transform: 'scale(0.5)'})
      ]) )),])
  ]);

源码

源码放在github开源社区上面，随时会更新。所以你下载最新版本的时候会与该文章描述的略有差异。
github地址：https://github.com/yiershan/A...