当前位置：首页 > VUE

vue 实现动效

2026-01-15 08:33:45VUE

Vue 实现动效的方法

Vue.js 提供了多种方式来实现动画效果，包括内置的过渡系统、第三方动画库以及直接操作 CSS 或 JavaScript 动画。以下是几种常见的实现方式：

使用 Vue 内置过渡系统

Vue 提供了 <transition> 和 <transition-group> 组件，用于在元素插入、更新或移除时应用过渡效果。可以通过 CSS 或 JavaScript 钩子来实现动画。

<transition name="fade">
  <p v-if="show">This will fade in and out</p>
</transition>

对应的 CSS 样式：

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

使用 CSS 动画

Vue 可以与 CSS 动画无缝集成，通过定义 CSS 动画并在 Vue 组件中触发。

<div class="bounce" v-if="show">Bouncing text</div>

对应的 CSS 样式：

.bounce {
  animation: bounce 1s infinite;
}

@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-20px); }
}

使用第三方动画库

Vue 可以与流行的动画库如 Animate.css、GSAP 或 Motion One 结合使用，提供更丰富的动画效果。

使用 Animate.css 的示例：

<transition
  enter-active-class="animate__animated animate__bounceIn"
  leave-active-class="animate__animated animate__bounceOut"
>
  <p v-if="show">Bouncing text</p>
</transition>

使用 JavaScript 钩子

Vue 的过渡系统提供了 JavaScript 钩子，可以在动画的不同阶段执行自定义逻辑。

<transition
  @before-enter="beforeEnter"
  @enter="enter"
  @after-enter="afterEnter"
>
  <p v-if="show">Custom animation</p>
</transition>

对应的 JavaScript 方法：

methods: {
  beforeEnter(el) {
    el.style.opacity = 0;
  },
  enter(el, done) {
    let opacity = 0;
    const interval = setInterval(() => {
      opacity += 0.1;
      el.style.opacity = opacity;
      if (opacity >= 1) {
        clearInterval(interval);
        done();
      }
    }, 100);
  },
  afterEnter(el) {
    console.log('Animation complete');
  }
}

使用 Vue 的 `<transition-group>`

<transition-group> 用于对列表中的多个元素应用过渡效果，每个元素会有独立的动画。

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

对应的 CSS 样式：

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

使用 Vue 的 `<teleport>` 与动画结合

Vue 3 的 <teleport> 可以与过渡效果结合，实现模态框等组件的动画。

<teleport to="body">
  <transition name="modal">
    <div class="modal" v-if="showModal">
      Modal content
    </div>
  </transition>
</teleport>

对应的 CSS 样式：

vue 实现动效

.modal-enter-active, .modal-leave-active {
  transition: opacity 0.3s, transform 0.3s;
}
.modal-enter, .modal-leave-to {
  opacity: 0;
  transform: scale(0.9);
}

通过以上方法，可以在 Vue 项目中灵活实现各种动画效果，满足不同的交互需求。

标签: vue