vue哪个组件实现动画

在 Vue 中实现动画可以通过多种组件和方式完成，以下是常用的方法和对应的组件：

Vue 内置过渡组件

Vue 提供了 <transition> 和 <transition-group> 组件，用于处理元素或组件的进入/离开动画以及列表动画。

• <transition>
  适用于单个元素或组件的过渡效果，通过 CSS 或 JavaScript 钩子实现动画。

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

  CSS 示例：

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

• <transition-group>
  适用于列表动画，每个元素需要唯一的 key。

  

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

第三方动画库

集成第三方库可以快速实现复杂动画效果。

• Animate.css
  通过 <transition> 直接应用预定义的 CSS 动画。

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

• GSAP (GreenSock)
  通过 JavaScript 实现高性能动画，适合复杂场景。

  

  import gsap from 'gsap';
  export default {
    methods: {
      enterAnimation(el, done) {
        gsap.from(el, {
          opacity: 0,
          duration: 1,
          onComplete: done
        });
      }
    }
  };

组件库动画方案

如 Element UI、Ant Design Vue 等提供了封装好的动画组件（如消息提示、弹窗过渡）。

• Element UI 的 el-collapse-transition
  用于折叠面板等组件的过渡效果。

  <el-collapse-transition>
    <div v-show="show">折叠内容</div>
  </el-collapse-transition>

自定义指令动画

通过 Vue 指令实现动画逻辑，适合复用特定动画行为。

Vue.directive('animate', {
  inserted(el) {
    el.style.transition = 'all 0.5s';
    el.style.opacity = '0';
    setTimeout(() => { el.style.opacity = '1'; }, 100);
  }
});

状态驱动的动画

结合 Vue 的响应式数据，通过动态类名或样式实现动画。

<div :class="{ 'scale-up': isActive }">动态动画</div>

.scale-up {
  transform: scale(1.1);
  transition: transform 0.3s;
}

根据需求选择合适的方式：简单过渡用内置组件，复杂动画用 GSAP 或第三方库，组件库场景直接使用封装好的方案。