vue实现过度切换

使用 Vue 过渡组件实现动画切换

Vue 提供了内置的 <transition> 和 <transition-group> 组件，用于在元素或组件进入/离开 DOM 时应用动画效果。

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

过渡类名说明

Vue 会自动为过渡元素添加以下类名：

• v-enter: 进入过渡的开始状态
• v-enter-active: 进入过渡的激活状态
• v-enter-to: 进入过渡的结束状态
• v-leave: 离开过渡的开始状态
• v-leave-active: 离开过渡的激活状态
• v-leave-to: 离开过渡的结束状态

可以通过 name 属性替换默认的 v 前缀。

JavaScript 钩子实现复杂动画

<transition
  @before-enter="beforeEnter"
  @enter="enter"
  @after-enter="afterEnter"
  @enter-cancelled="enterCancelled"
  @before-leave="beforeLeave"
  @leave="leave"
  @after-leave="afterLeave"
  @leave-cancelled="leaveCancelled"
>
  <div v-if="show">内容</div>
</transition>

methods: {
  beforeEnter(el) {
    // 进入前
  },
  enter(el, done) {
    // 进入中
    done() // 调用表示动画完成
  },
  // 其他钩子...
}

列表过渡使用 transition-group

当需要渲染整个列表时，使用 <transition-group> 组件：

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

初始渲染过渡

添加 appear 属性可以使初始渲染也有过渡效果：

<transition appear>
  <!-- 内容 -->
</transition>

第三方动画库集成

可以方便地集成 Animate.css 等动画库：

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

过渡模式设置

通过 mode 属性控制进出过渡的顺序：

• in-out: 新元素先过渡进入，完成后当前元素过渡离开
• out-in: 当前元素先过渡离开，完成后新元素过渡进入

<transition mode="out-in">
  <!-- 内容 -->
</transition>