vue转场动画如何实现

Vue 转场动画的实现方法

Vue 提供了内置的 <transition> 和 <transition-group> 组件，用于实现元素的进入和离开动画。以下是具体的实现方式：

使用 <transition> 组件

1. 基本用法 在需要动画的元素外包裹 <transition> 组件，并设置 name 属性。Vue 会自动根据元素的进入和离开状态添加对应的 CSS 类名。

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

2. CSS 动画定义 定义对应的 CSS 过渡样式，类名格式为 name-enter、name-enter-active 等。

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

使用 <transition-group> 组件

1. 列表动画 适用于动态列表的动画效果，每个子元素需要唯一的 key 属性。

   

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

2. CSS 定义 定义列表动画的样式，与 <transition> 类似。

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

结合 JavaScript 钩子

可以通过 JavaScript 钩子函数实现更复杂的动画逻辑。

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

methods: {
  beforeEnter(el) {
    el.style.opacity = 0;
  },
  enter(el, done) {
    // 使用动画库或自定义逻辑
    setTimeout(() => {
      el.style.opacity = 1;
      done();
    }, 500);
  },
  afterEnter(el) {
    // 动画完成后的操作
  }
}

使用第三方动画库

1. Animate.css 结合 Animate.css 可以快速实现丰富的动画效果。

   

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

2. Velocity.js 通过 JavaScript 动画库实现高性能动画。

   enter(el, done) {
     Velocity(el, { opacity: 1 }, { duration: 500, complete: done });
   }

动态过渡与模式

1. 动态过渡 可以根据状态动态切换过渡效果。

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

2. 过渡模式 使用 mode 属性控制进入和离开的顺序。

   <transition name="fade" mode="out-in">
     <div v-if="show" key="1">内容1</div>
     <div v-else key="2">内容2</div>
   </transition>

通过以上方法，可以灵活实现 Vue 中的转场动画效果。