返回目錄

前言

文章基于angular的練手項(xiàng)目粱檀。文章目錄
上一篇文章《Angular練習(xí)之a(chǎn)nimations動(dòng)畫二》中練習(xí)了入場和出場動(dòng)畫洲敢、 Keyframes實(shí)現(xiàn)串聯(lián)動(dòng)畫、Group實(shí)現(xiàn)并行動(dòng)畫茄蚯。今天練習(xí)動(dòng)畫回調(diào)函數(shù)压彭、query選擇器、路由中使用動(dòng)畫第队。

開始練習(xí)

回調(diào)函數(shù)

回調(diào)用法也是很簡單哮塞，如下：

  <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("動(dòng)畫開始");
    }else {
      console.log("動(dòng)畫結(jié)束");
    }
  }

演示效果

query

用法和css選擇器大致相同,通過query便可以實(shí)現(xiàn)不同元素實(shí)現(xiàn)不同的動(dòng)畫效果。

/*
query選擇器演示
用法和css選擇器大致相同
 */
export const QueryAnimate = trigger('QueryAnimate',[
    transition('off=>on', [
      // 先全部隱藏
      query('div', style({ opacity: 0 })),
      // 再執(zhí)行動(dòng)畫
      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開源社區(qū)上面凳谦，隨時(shí)會(huì)更新忆畅。所以你下載最新版本的時(shí)候會(huì)與該文章描述的略有差異。
github地址：https://github.com/yiershan/Angular5-test