Vue.js

Appearance

On this page

动画技巧 ​

Vue 提供了 <Transition> 和 <TransitionGroup> 组件，用于处理进入 / 离开和列表过渡。然而，在网页中使用动画还有许多其他方式，即使是在 Vue 应用中也是如此。这里我们将讨论一些额外的技巧。

基于类的动画 ​

对于那些不会进入 / 离开 DOM 的元素，我们可以通过动态添加一个 CSS 类来触发动画：

js
const disabled = ref(false)

function warnDisabled() {
  disabled.value = true
  setTimeout(() => {
    disabled.value = false
  }, 1500)
}
js
export default {
  data() {
    return {
      disabled: false
    }
  },
  methods: {
    warnDisabled() {
      this.disabled = true
      setTimeout(() => {
        this.disabled = false
      }, 1500)
    }
  }
}
template
<div :class="{ shake: disabled }">
  <button @click="warnDisabled">点击我</button>
  <span v-if="disabled">此功能已禁用！</span>
</div>
css
.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);
  }
}

由状态驱动的动画 ​

某些过渡效果可以通过插值实现，例如在交互发生时为元素绑定一个样式。以下就是一个例子：

js
const x = ref(0)

function onMousemove(e) {
  x.value = e.clientX
}
js
export default {
  data() {
    return {
      x: 0
    }
  },
  methods: {
    onMousemove(e) {
      this.x = e.clientX
    }
  }
}
template
<div
  @mousemove="onMousemove"
  :style="{ backgroundColor: `hsl(${x}, 80%, 50%)` }"
  class="movearea"
>
  <p>在这个 div 上移动你的鼠标...</p>
  <p>x: {{ x }}</p>
</div>
css
.movearea {
  transition: 0.3s background-color ease;
}

在这个 div 上移动鼠标……

x: 0

除了颜色之外，你还可以使用样式绑定来为 transform、width 或 height 添加动画。你甚至可以使用弹簧物理来为 SVG 路径添加动画——毕竟，它们本质上都是属性数据绑定：

拖动我
源代码

使用 Watcher 进行动画 ​

只要稍微发挥一点创造力，我们就可以使用 watcher 来基于某些数值状态为任何内容添加动画。例如，我们可以为数字本身添加动画：

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

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

// 注意：对于大于 Number.MAX_SAFE_INTEGER（9007199254740991）的输入，
// 由于 JavaScript 数字精度的限制，结果可能不准确。
watch(number, (n) => {
  gsap.to(tweened, { duration: 0.5, number: Number(n) || 0 })
})
template
输入一个数字：<input v-model.number="number" />
<p>{{ tweened.number.toFixed(0) }}</p>
js
import gsap from 'gsap'

export default {
  data() {
    return {
      number: 0,
      tweened: 0
    }
  },
  // 注意：对于大于 Number.MAX_SAFE_INTEGER（9007199254740991）的输入，
  // 由于 JavaScript 数字精度的限制，结果可能不准确。
  watch: {
    number(n) {
      gsap.to(this, { duration: 0.5, tweened: Number(n) || 0 })
    }
  }
}
template
输入一个数字：<input v-model.number="number" />
<p>{{ tweened.toFixed(0) }}</p>
输入一个数字：

0

在 Playground 中试试

在 Playground 中试试

在 GitHub 上编辑此页