动画技巧
Vue 提供了<Transition>
和<TransitionGroup>
组件来处理进入、离开和列表的过渡。然而,在网页上制作动画的方式非常多,即使是在一个 Vue 应用中也是如此。这里我们会探讨一些别的技巧。
基于 CSS 类的动画
对于那些不是正在进入或离开 DOM 的元素,我们可以通过给它们动态添加 CSS 类来触发动画:
const disabled = ref(false) function warnDisabled() { disabled.value = true setTimeout(() => { disabled.value = false }, 1500) }
<div :class="{ shake: notActivated }"> <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); } }
状态驱动的动画
有些过渡效果可以通过动态地插值来实现,例如,在交互时动态地绑定样式到元素,以这个例子为例:
const x = ref(0) function onMousemove(e) { x.value = e.clientX }
<div @mousemove="onMousemove" :style="{ backgroundColor: `hsl(${x}, 80%, 50%)` }" class="movearea" > <p>Move your mouse across this div...</p> <p>x: {{ x }}</p> </div>
.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: <input v-model.number="number" /> <p>{{ tweened.number.toFixed(0) }}</p>