vue实现动画特效

Vue 动画实现基础

Vue 提供了 <transition> 和 <transition-group> 组件，结合 CSS 或 JavaScript 钩子实现动画效果。通过 name 属性定义动画类名前缀，Vue 会自动在元素插入/移除时添加对应的 CSS 类。

CSS 过渡示例：

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

使用 Animate.css 库

通过引入第三方 CSS 动画库（如 Animate.css），快速实现复杂动画效果。

安装与使用：

npm install animate.css

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

需在 main.js 中全局引入：

import 'animate.css';

JavaScript 动画钩子

通过监听 Vue 的动画生命周期钩子（如 beforeEnter、enter、afterEnter），结合 GSAP 或原生 JavaScript 实现更复杂的动画逻辑。

GSAP 示例：

<transition @enter="onEnter" @leave="onLeave">
  <div v-if="show">GSAP 动画</div>
</transition>

import gsap from 'gsap';
methods: {
  onEnter(el, done) {
    gsap.from(el, {
      opacity: 0,
      duration: 1,
      onComplete: done
    });
  },
  onLeave(el, done) {
    gsap.to(el, {
      opacity: 0,
      duration: 0.5,
      onComplete: done
    });
  }
}

列表动画（TransitionGroup）

<transition-group> 用于对动态列表（如 v-for 渲染的列表）中的元素应用动画，需为每个子元素设置唯一的 key。

示例：

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

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

状态驱动的动画

通过 Vue 的响应式数据结合 CSS 变量或 style 绑定，实现动态交互效果。

鼠标悬停缩放示例：

<div 
  @mouseenter="hover = true"
  @mouseleave="hover = false"
  :style="{ transform: hover ? 'scale(1.1)' : 'scale(1)' }"
>悬停放大</div>

data() {
  return { hover: false };
}