import { BrowserAnimationsModule } from "@angular/platform-browser/animations"

@NgModule({
  imports: [BrowserAnimationsModule],
})
export class AppModule {}

  
Todos
  
    
  

import { Component } from "@angular/core"

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styles: []
})
export class AppComponent {
  // todo 列表
  todos: string[] = ["Learn Angular", "Learn RxJS", "Learn NgRx"]
  // 添加 todo
  addItem(input: HTMLInputElement) {
    this.todos.push(input.value)
    input.value = ""
  }
  // 刪除 todo
  removeItem(index: number) {
    this.todos.splice(index, 1)
  }
}

創(chuàng)建動(dòng)畫

• trigger 方法用于創(chuàng)建動(dòng)畫，指定動(dòng)畫名稱

• transition 方法用于指定動(dòng)畫的運(yùn)動(dòng)狀態(tài)，出場(chǎng)動(dòng)畫或者入場(chǎng)動(dòng)畫，或者自定義狀態(tài)動(dòng)畫。

• style 方法用于設(shè)置元素在不同的狀態(tài)下所對(duì)應(yīng)的樣式

• animate 方法用于設(shè)置運(yùn)動(dòng)參數(shù)，比如動(dòng)畫運(yùn)動(dòng)時(shí)間，延遲事件，運(yùn)動(dòng)形式

@Component({
  animations: [
    // 創(chuàng)建動(dòng)畫, 動(dòng)畫名稱為 slide
    trigger("slide", [
      // 指定入場(chǎng)動(dòng)畫 注意: 字符串兩邊不能有空格, 箭頭兩邊可以有也可以沒有空格
      // void => * 可以替換為 :enter
      transition("void => *", [
        // 指定元素未入場(chǎng)前的樣式
        style({ opacity: 0, transform: "translateY(40px)" }),
        // 指定元素入場(chǎng)后的樣式及運(yùn)動(dòng)參數(shù)
        animate(250, style({ opacity: 1, transform: "translateY(0)" }))
      ]),
      // 指定出場(chǎng)動(dòng)畫
      // * => void 可以替換為 :leave
      transition("* => void", [
        // 指定元素出場(chǎng)后的樣式和運(yùn)動(dòng)參數(shù)
        animate(600, style({ opacity: 0, transform: "translateX(100%)" }))
      ])
    ])
  ]
})

注意：入場(chǎng)動(dòng)畫中可以不指定元素的默認(rèn)狀態(tài)，Angular 會(huì)將 void 狀態(tài)清空作為默認(rèn)狀態(tài)

trigger("slide", [
  transition(":enter", [
    style({ opacity: 0, transform: "translateY(40px)" }),
    animate(250)
  ]),
  transition(":leave", [
    animate(600, style({ opacity: 0, transform: "translateX(100%)" }))
  ])
])

注意：要設(shè)置動(dòng)畫的運(yùn)動(dòng)參數(shù)，需要將 animate 方法的一個(gè)參數(shù)更改為字符串類型

// 動(dòng)畫執(zhí)行總時(shí)間 延遲時(shí)間(可選) 運(yùn)動(dòng)形式(可選)
animate("600ms 1s ease-out", style({ opacity: 0, transform: "translateX(100%)" }))

3.  關(guān)鍵幀動(dòng)畫

關(guān)鍵幀動(dòng)畫使用 keyframes 方法定義

transition(":leave", [
  animate(
    600,
    keyframes([
      style({ offset: 0.3, transform: "translateX(-80px)" }),
      style({ offset: 1, transform: "translateX(100%)" })
    ])
  )
])

4.  動(dòng)畫回調(diào)

Angular 提供了和動(dòng)畫相關(guān)的兩個(gè)回調(diào)函數(shù)，分別為動(dòng)畫開始執(zhí)行時(shí)和動(dòng)畫執(zhí)行完成后

import { AnimationEvent } from "@angular/animations"

start(event: AnimationEvent) {
  console.log(event)
}
done(event: AnimationEvent) {
  console.log(event)
}

5.  創(chuàng)建可重用動(dòng)畫

將動(dòng)畫的定義放置在單獨(dú)的文件中，方便多組件調(diào)用。

import { animate, keyframes, style, transition, trigger } from "@angular/animations"

export const slide = trigger("slide", [
  transition(":enter", [
    style({ opacity: 0, transform: "translateY(40px)" }),
    animate(250)
  ]),
  transition(":leave", [
    animate(
      600,
      keyframes([
        style({ offset: 0.3, transform: "translateX(-80px)" }),
        style({ offset: 1, transform: "translateX(100%)" })
      ])
    )
  ])
])

import { slide } from "./animations"

@Component({
  animations: [slide]
})

抽取具體的動(dòng)畫定義，方便多動(dòng)畫調(diào)用。

import {animate, animation, keyframes, style, transition, trigger, useAnimation} from "@angular/animations"

export const slideInUp = animation([
  style({ opacity: 0, transform: "translateY(40px)" }),
  animate(250)
])

export const slideOutLeft = animation([
  animate(
    600,
    keyframes([
      style({ offset: 0.3, transform: "translateX(-80px)" }),
      style({ offset: 1, transform: "translateX(100%)" })
    ])
  )
])

export const slide = trigger("slide", [
  transition(":enter", useAnimation(slideInUp)),
  transition(":leave", useAnimation(slideOutLeft))
])

調(diào)用動(dòng)畫時(shí)傳遞運(yùn)動(dòng)總時(shí)間，延遲時(shí)間，運(yùn)動(dòng)形式

export const slideInUp = animation(
  [
    style({ opacity: 0, transform: "translateY(40px)" }),
    animate("{{ duration }} {{ delay }} {{ easing }}")
  ],
  {
    params: {
      duration: "400ms",
      delay: "0s",
      easing: "ease-out"
    }
  }
)

transition(":enter", useAnimation(slideInUp, {params: {delay: "1s"}}))

6.  查詢?cè)貓?zhí)行動(dòng)畫

Angular 中提供了 query 方法查找元素并為元素創(chuàng)建動(dòng)畫

import { slide } from "./animations"

animations: [
  slide,
  trigger("todoAnimations", [
    transition(":enter", [
      query("h3", [
        style({ transform: "translateY(-30px)" }),
        animate(300)
      ]),
      // 查詢子級(jí)動(dòng)畫 使其執(zhí)行
      query("@slide", animateChild())
    ])
  ])
]

  
Todos
  
    

      {{ item }}