vue过渡怎么实现

Vue过渡的实现方法

Vue提供了内置的过渡系统，通过<transition>和<transition-group>组件实现元素的进入/离开过渡效果。以下是具体实现方式：

使用<transition>组件

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

过渡类名说明

Vue会自动应用以下类名实现过渡效果：

• v-enter：进入开始状态
• v-enter-active：进入激活状态
• v-enter-to：进入结束状态
• v-leave：离开开始状态
• v-leave-active：离开激活状态
• v-leave-to：离开结束状态

自定义过渡名称时（如name="fade"），类名前缀会变为fade-。

JavaScript钩子实现

可以通过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() // 必须调用以结束过渡
  }
}

列表过渡

对于v-for渲染的列表，使用<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="animated bounceIn"
  leave-active-class="animated bounceOut"
>
  <div v-if="show">内容</div>
</transition>

过渡模式设置

通过mode属性控制进入/离开的顺序：

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

可选值：in-out（先进后出）或out-in（先出后进）