vue平时如何实现动画

使用 Vue 内置过渡组件

Vue 提供了 <transition> 和 <transition-group> 组件，用于实现元素进入/离开的动画效果。通过 CSS 类名或 JavaScript 钩子函数控制动画过程。

CSS 过渡示例

<transition name="fade">
  <p v-if="show">淡入淡出的内容</p>
</transition>

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

JavaScript 钩子示例

<transition
  @before-enter="beforeEnter"
  @enter="enter"
  @leave="leave"
>
  <p v-if="show">通过钩子控制的动画</p>
</transition>

methods: {
  beforeEnter(el) {
    el.style.opacity = 0;
  },
  enter(el, done) {
    anime({
      targets: el,
      opacity: 1,
      duration: 500,
      complete: done
    });
  },
  leave(el, done) {
    anime({
      targets: el,
      opacity: 0,
      duration: 500,
      complete: done
    });
  }
}

结合 CSS 动画库

直接使用 Animate.css 等现成动画库，通过 <transition> 的 enter-active-class 和 leave-active-class 属性快速应用动画。

<transition
  enter-active-class="animate__animated animate__fadeIn"
  leave-active-class="animate__animated animate__fadeOut"
>
  <p v-if="show">Animate.css 动画</p>
</transition>

使用 JavaScript 动画库

通过 GreenSock (GSAP) 或 anime.js 实现复杂动画，通常在 Vue 的 mounted 或方法中调用动画库 API。

GSAP 示例

mounted() {
  gsap.to(this.$refs.box, {
    x: 100,
    duration: 1,
    repeat: -1,
    yoyo: true
  });
}

组件状态驱动的动画

利用 Vue 的响应式数据和计算属性，动态绑定样式或类名实现动画效果。例如根据数据变化改变元素位置或大小。

<div 
  class="box" 
  :style="{ transform: `scale(${scale})` }"
  @mouseover="scale = 1.2"
  @mouseleave="scale = 1"
></div>

data() {
  return {
    scale: 1
  };
}

第三方 Vue 动画插件

使用 vue-use-gesture 或 vue-kinesis 等插件实现拖拽、视差等交互动画。

vue-kinesis 示例

<kinesis-container>
  <kinesis-element strength="10">
    视差滚动效果
  </kinesis-element>
</kinesis-container>

性能优化建议

• 优先使用 CSS 动画而非 JavaScript 动画以提高性能。
• 对频繁变化的动画使用 transform 和 opacity 属性，触发硬件加速。
• 复杂动画考虑使用 requestAnimationFrame 或 Web Workers 避免阻塞主线程。