vue 动画实现

Vue 动画实现方式

Vue 提供了多种方式实现动画效果，主要分为内置组件和第三方库集成。

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

使用 JavaScript 钩子

通过监听过渡事件的 JavaScript 钩子实现更复杂的动画：

<transition
  @before-enter="beforeEnter"
  @enter="enter"
  @leave="leave"
>
  <div v-if="show">内容</div>
</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
    });
  }
}

列表动画

<transition-group> 可为列表元素添加排序动画：

<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 插件形式集成 GSAP 或 Anime.js：

import gsap from 'gsap';

Vue.prototype.$gsap = gsap;

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

methods: {
  enter(el, done) {
    this.$gsap.from(el, {
      x: 100,
      opacity: 0,
      duration: 0.5,
      onComplete: done
    });
  },
  leave(el, done) {
    this.$gsap.to(el, {
      x: -100,
      opacity: 0,
      duration: 0.5,
      onComplete: done
    });
  }
}

状态驱动的动画

使用 Vue 的响应式数据和计算属性驱动动画：

<div class="box" :style="{ transform: `rotate(${angle}deg)` }"></div>
<button @click="angle += 45">旋转</button>

data() {
  return {
    angle: 0
  };
}

.box {
  transition: transform 0.3s ease;
  width: 100px;
  height: 100px;
  background: #42b983;
}

路由过渡动画

为 Vue Router 的视图切换添加过渡效果：

<router-view v-slot="{ Component }">
  <transition name="slide" mode="out-in">
    <component :is="Component" />
  </transition>
</router-view>

.slide-enter-active, .slide-leave-active {
  transition: all 0.3s ease;
}
.slide-enter-from {
  transform: translateX(100%);
}
.slide-leave-to {
  transform: translateX(-100%);
}