Vue 3 Transition 组件教程

Vue 3 Transition 组件教程

1. 什么是 Transition 组件？

Vue 的 <Transition> 组件是一个内置的组件，专门用于处理元素或组件的进入、离开和状态变化的动画效果。它提供了一种简单而强大的方式来为元素添加过渡和动画。

2. 基本用法

2.1 简单示例

<template>
  <button @click="show = !show">切换</button>
  
  <Transition>
    <div v-if="show">
      这是一个可以显示和隐藏的元素
    </div>
  </Transition>
</template>

<script setup>
import { ref } from 'vue'

const show = ref(false)
</script>

<style>
/* 进入过渡效果 */
.v-enter-active {
  transition: opacity 0.5s ease;
}

/* 离开过渡效果 */
.v-leave-active {
  transition: opacity 0.5s ease;
}

.v-enter-from,
.v-leave-to {
  opacity: 0;
}
</style>

3. Transition 组件的生命周期类名

Vue 的 Transition 组件在动画过程中会自动应用以下 CSS 类：

3.1 进入阶段类名

• v-enter-from：定义进入开始时的状态
• v-enter-active：定义进入过程的活动状态
• v-enter-to：定义进入结束时的状态

3.2 离开阶段类名

• v-leave-from：定义离开开始时的状态
• v-leave-active：定义离开过程的活动状态
• v-leave-to：定义离开结束时的状态

4. 自定义过渡类名

你可以通过 Transition 组件的 props 自定义过渡类名：

<Transition
  enter-from-class="custom-enter-from"
  enter-active-class="custom-enter-active"
  enter-to-class="custom-enter-to"
  leave-from-class="custom-leave-from"
  leave-active-class="custom-leave-active"
  leave-to-class="custom-leave-to"
>
  <div v-if="show">可以自定义的元素</div>
</Transition>

5. JavaScript 钩子

除了 CSS 过渡，你还可以使用 JavaScript 钩子来控制动画：

<Transition
  @before-enter="onBeforeEnter"
  @enter="onEnter"
  @after-enter="onAfterEnter"
  @before-leave="onBeforeLeave"
  @leave="onLeave"
  @after-leave="onAfterLeave"
>
  <div v-if="show">可以使用 JS 钩子的元素</div>
</Transition>

<script setup>
function onEnter(el, done) {
  // 自定义进入动画逻辑
  // 调用 done() 表示动画完成
}
</script>

6. 动画模式

Transition 组件支持动画模式，可以控制进入和离开动画的顺序：

<Transition mode="out-in">
  <!-- 元素会先完全离开，然后新元素再进入 -->
  <div :key="currentView">{{ currentView }}</div>
</Transition>

可用的模式：

• in-out：新元素先进入，旧元素再离开
• out-in：旧元素先离开，新元素再进入

7. 使用第三方动画库

可以很容易地与 Animate.css 等动画库集成：

<Transition
  enter-active-class="animate__animated animate__fadeIn"
  leave-active-class="animate__animated animate__fadeOut"
>
  <div v-if="show">动画元素</div>
</Transition>

8. 性能注意事项

• 尽量使用 transform 和 opacity 属性进行动画
• 避免对大量元素同时应用复杂的过渡效果
• 对于复杂动画，考虑使用 CSS will-change 属性优化性能

9. 最佳实践

1. 保持动画简洁和流畅
2. 动画时长建议在 300-500 毫秒之间
3. 避免过于复杂的动画效果
4. 考虑用户体验和可访问性

10. 总结

Vue 3 的 Transition 组件提供了强大且灵活的动画解决方案，无论是简单的淡入淡出，还是复杂的自定义动画，都能轻松实现。

原文地址：https://blog.csdn.net/wscfan/article/details/144061683

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！