动画技巧

Vue 提供了和组件来处理进入、离开和列表的过渡。然而，在网页上制作动画的方式非常多，即使是在一个 Vue 应用中也是如此。这里我们会探讨一些别的技巧。

基于 CSS 类的动画

对于那些不是正在进入或离开 DOM 的元素，我们可以通过给它们动态添加 CSS 类来触发动画：

const disabled = ref(false)

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

 Click me This feature is disabled!

.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);
  }
}

状态驱动的动画

有些过渡效果可以通过动态地插值来实现，例如，在交互时动态地绑定样式到元素，以这个例子为例：

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

 
Move your mouse across this div...
 
x: {{ x }}

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

带侦听器的动画

在一些动画创意里，我们可以根据一些数字状态，使用侦听器将任何东西做成动画。例如，我们可以将数字本身变成动画：

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: 
{{ tweened.number.toFixed(0) }}

鹏仔微信 15129739599 鹏仔QQ344225443 鹏仔前端 pjxi.com 共享博客 sharedbk.com