EP64 - 動畫技巧

Animation Techniques，這是文件最後一篇內容了～
大家其實也發現，翻譯的品質真的不太好～
等我有空再好好修正一下～ 之後實作之後再回來看一下這些內容吧！！！

Vue 提供 <Transition> 和 <TransitionGroup> 元件來處理進入/離開和列表過渡效果。然而，即使在 Vue 應用程式中，網頁上還有許多其他使用動畫的方法。在這裡，我們將討論一些額外的技術。

基於類別的動畫 - Class-based Animations

對於不進入/離開 DOM 的元素，我們可以通過動態添加 CSS 類別來觸發動畫：

const disabled = ref(false)

function warnDisabled() {
  disabled.value = true
  setTimeout(() => {
    disabled.value = false
  }, 1500)
}

<div :class="{ shake: disabled }">
  <button @click="warnDisabled">Click me</button>
  <span v-if="disabled">This feature is disabled!</span>
</div>

.shake {
  animation: shake 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
  transform: translate3d(0, 0, 0);
}

@keyframes shake {
  10%,
  90% {
    transform: translate3d(-1px, 0, 0);
  }

  20%,
  80% {
    transform: translate3d(2px, 0, 0);
  }

  30%,
  50%,
  70% {
    transform: translate3d(-4px, 0, 0);
  }

  40%,
  60% {
    transform: translate3d(4px, 0, 0);
  }
}

基於狀態的動畫 - State-driven Animations

某些過渡效果可以通過插值值來應用，例如在互動發生時綁定樣式到元素。以下是一個例子：

const x = ref(0)

function onMousemove(e) {
  x.value = e.clientX
}

<div
  @mousemove="onMousemove"
  :style="{ backgroundColor: `hsl(${x.value}, 80%, 50%)` }"
  class="movearea"
>
  <p>Move your mouse across this div...</p>
  <p>x: {{ x }}</p>
</div>

.movearea {
  transition: 0.3s background-color ease;
}

除了顏色，你還可以使用樣式綁定來動畫化變換、寬度或高度。你甚至可以使用彈簧物理效果來動畫化 SVG 路徑——畢竟，它們都是屬性資料綁定。

source code

使用監視器的動畫 - Animating with Watchers

通過一些創意，我們可以使用監視器根據一些數值狀態來動畫化任何事物。例如，我們可以動畫化數字本身：

import { ref, reactive, watch } from 'vue'
import gsap from 'gsap'

const number = ref(0)
const tweened = reactive({
  number: 0
})

watch(number, (n) => {
  gsap.to(tweened, { duration: 0.5, number: Number(n) || 0 })
})

Type a number: <input v-model.number="number" />
<p>{{ tweened.number.toFixed(0) }}</p>

這些技術展示了如何在 Vue 應用中使用不同的方法來創建動畫效果，無論是基於 CSS 類別、樣式綁定，還是通過 JavaScript 監視器。

Try it in the playground