vue实现进入动画

Vue 进入动画实现方法

使用 Vue 的过渡系统实现进入动画，主要通过 <transition> 或 <transition-group> 组件结合 CSS 或 JavaScript 钩子完成。

CSS 过渡动画

定义进入动画的 CSS 类名，Vue 会自动在适当时机添加/移除这些类：

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

.fade-enter-active {
  transition: opacity 0.5s;
}
.fade-enter-from {
  opacity: 0;
}

CSS 动画

使用 @keyframes 定义动画效果：

.bounce-enter-active {
  animation: bounce-in 0.5s;
}
@keyframes bounce-in {
  0% {
    transform: scale(0);
  }
  50% {
    transform: scale(1.25);
  }
  100% {
    transform: scale(1);
  }
}

JavaScript 钩子

通过监听过渡的生命周期事件实现更复杂的动画：

<transition
  @before-enter="beforeEnter"
  @enter="enter"
  @after-enter="afterEnter">
  <div v-if="show">内容</div>
</transition>

methods: {
  beforeEnter(el) {
    el.style.opacity = 0
    el.style.transformOrigin = 'left'
  },
  enter(el, done) {
    gsap.to(el, {
      opacity: 1,
      x: 0,
      duration: 0.8,
      onComplete: done
    })
  }
}

第三方动画库

集成 Animate.css 等现成动画库：

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

列表过渡

对多个元素使用 <transition-group> 实现进入动画：

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

.list-enter-active {
  transition: all 1s;
}
.list-enter-from {
  opacity: 0;
  transform: translateY(30px);
}

初始渲染动画

使用 appear 属性让元素在初始渲染时也有动画：

<transition
  appear
  appear-class="custom-appear-class"
  appear-to-class="custom-appear-to-class"
  appear-active-class="custom-appear-active-class">
  <div>内容</div>
</transition>

动态过渡

根据状态动态改变过渡效果：

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

data() {
  return {
    transitionName: 'fade'
  }
}

每种方法适用于不同场景，CSS 过渡适合简单动画，JavaScript 钩子适合复杂交互，第三方库能快速实现专业效果，列表过渡处理多个元素动画。根据项目需求选择合适方案，注意动画性能优化避免卡顿。