vue如何实现动画

实现 Vue 动画的常见方法

使用 Vue 内置的 <transition> 组件
Vue 提供了 <transition> 组件，用于在元素插入、更新或移除时添加动画效果。通过设置 CSS 过渡类名（如 v-enter、v-leave-to）或 JavaScript 钩子函数（如 beforeEnter、enter）实现动画。

<transition name="fade">
  <div v-if="show">内容</div>
</transition>

<style>
.fade-enter-active, .fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}
</style>

结合 CSS 动画库（如 Animate.css）
直接引入第三方 CSS 动画库，通过 <transition> 的 enter-active-class 和 leave-active-class 属性指定动画类名。

<transition
  enter-active-class="animate__animated animate__bounceIn"
  leave-active-class="animate__animated animate__bounceOut"
>
  <div v-if="show">内容</div>
</transition>

使用 JavaScript 动画钩子
通过 <transition> 的 JavaScript 钩子（如 enter、leave）实现更复杂的动画逻辑，例如结合 GSAP 或 Velocity.js。

<transition
  @enter="enterAnimation"
  @leave="leaveAnimation"
  :css="false"
>
  <div v-if="show">内容</div>
</transition>

<script>
methods: {
  enterAnimation(el, done) {
    gsap.from(el, { opacity: 0, duration: 0.5, onComplete: done });
  },
  leaveAnimation(el, done) {
    gsap.to(el, { opacity: 0, duration: 0.5, onComplete: done });
  }
}
</script>

列表动画（<transition-group>）
通过 <transition-group> 为动态列表中的元素添加过渡效果，需为每个子元素设置唯一的 key。

<transition-group name="list" tag="ul">
  <li v-for="item in items" :key="item.id">{{ item.text }}</li>
</transition-group>

<style>
.list-enter-active, .list-leave-active {
  transition: all 0.5s;
}
.list-enter, .list-leave-to {
  opacity: 0;
  transform: translateY(30px);
}
</style>

状态驱动的动态动画
通过响应式数据绑定样式或类名，结合 CSS 过渡或动画实现状态变化效果。

<div :class="{ 'active': isActive }">内容</div>
<div :style="{ transform: `scale(${scaleValue})` }">缩放效果</div>

<style>
.active {
  transition: background-color 0.3s;
  background-color: #42b983;
}
</style>

第三方动画插件（如 VueUse Motion）
使用插件简化动画实现，例如 VueUse 的 useMotion 提供声明式动画控制。

import { useMotion } from '@vueuse/motion';

const { variant, apply } = useMotion({
  initial: { opacity: 0 },
  enter: { opacity: 1, transition: { duration: 1000 } }
});

<div v-motion="variant">动画内容</div>

注意事项

• 确保动画性能优化，避免频繁触发重排或重绘。
• 对于复杂动画，优先使用 CSS transform 和 opacity 属性。
• 移动端注意硬件加速（如 will-change）。