当前位置：首页 > VUE

vue实现动画特效

2026-01-16 05:16:04VUE

Vue 实现动画特效的方法

Vue 提供了多种方式实现动画特效，主要通过内置组件和第三方库结合 CSS 或 JavaScript 完成。以下是常见的实现方法：

使用 Vue 内置过渡组件

Vue 的 <transition> 和 <transition-group> 组件可以方便地添加进入/离开动画。通过 CSS 过渡类名或 JavaScript 钩子实现动画效果。

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

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

结合 CSS 动画库

引入 Animate.css 等现成的 CSS 动画库，通过 Vue 过渡组件直接调用类名。

vue实现动画特效

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

使用 JavaScript 动画库

通过 GSAP 或 Anime.js 等库实现复杂动画，在 Vue 的过渡钩子中调用。

<transition
  @enter="enterEl"
  @leave="leaveEl"
  :css="false"
>
  <div v-if="show">GSAP 动画</div>
</transition>

<script>
import gsap from 'gsap'
export default {
  methods: {
    enterEl(el, done) {
      gsap.from(el, {
        opacity: 0,
        duration: 1,
        onComplete: done
      })
    },
    leaveEl(el, done) {
      gsap.to(el, {
        opacity: 0,
        duration: 0.5,
        onComplete: done
      })
    }
  }
}
</script>

列表动画实现

使用 <transition-group> 处理动态列表的排序动画，需为每个元素设置唯一 key。

vue实现动画特效

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

.list-move {
  transition: transform 0.8s ease;
}

状态驱动的动画

通过 Vue 的响应式数据驱动 CSS 变量或直接操作样式，实现交互式动画。

<div 
  class="box" 
  :style="{ transform: `rotate(${angle}deg)` }"
  @mousemove="updateAngle"
></div>

export default {
  data() {
    return { angle: 0 }
  },
  methods: {
    updateAngle(e) {
      this.angle = e.offsetX
    }
  }
}

第三方 Vue 动画库

使用专门为 Vue 设计的动画库如 Vue-Kinesis 或 VueUse Motion 简化实现。

<template>
  <Kinesis element="div" :strength="10">
    视差滚动效果
  </Kinesis>
</template>

<script>
import { Kinesis } from 'vue-kinesis'
export default {
  components: { Kinesis }
}
</script>

以上方法可根据项目需求单独或组合使用。CSS 方案适合简单动画，JavaScript 方案适合复杂交互，第三方库能快速实现专业效果。所有示例代码需要结合具体 Vue 项目环境调整使用。