龙空技术网

vue3-动画技巧

王大可996 103

前言:

目前同学们对“vue3 动画”可能比较看重,朋友们都想要分析一些“vue3 动画”的相关内容。那么小编在网摘上收集了一些关于“vue3 动画””的相关内容,希望我们能喜欢,看官们一起来了解一下吧!

Vue 提供了 <Transition> 和 <TransitionGroup> 组件来处理元素进入、离开和列表顺序变化的过渡效果。但除此之外,还有许多其他制作网页动画的方式在 Vue 应用中也适用。这里我们会探讨一些额外的技巧。

基于 CSS class 的动画

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

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);  }}
状态驱动的动画

有些过渡效果可以通过动态插值来实现,比如在交互时动态地给元素绑定样式。看下面这个例子:

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

除了颜色外,你还可以使用样式绑定 CSS transform、宽度或高度。你甚至可以通过运用弹性物理模拟为 SVG 添加动画,毕竟它们也只是 attribute 的数据绑定:

基于侦听器的动画

通过发挥一些创意,我们可以基于一些数字状态,配合侦听器给任何东西加上动画。例如,我们可以将数字本身变成动画:

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>

标签: #vue3 动画 #vue3 动画推荐 #vue如何实现动画 #vue做动画