vue新版怎么转场

在 Vue 3 中，实现过渡效果主要依赖于 <Transition> 和 <TransitionGroup> 这两个内置组件。以下是一些基本的使用方法：

基本使用： 你可以使用 <Transition> 组件来包裹需要过渡的元素或组件。例如，你可以这样创建一个简单的淡入淡出效果：

<Transition name="fade">
 <div v-if="show">这里是需要过渡的内容</div>
</Transition>

这里 name 属性用于指定过渡的名称，你可以在 CSS 中定义 .fade-enter-active、.fade-enter-from 等类来控制过渡效果。

过渡钩子： Vue 提供了一系列的钩子函数，你可以在这些钩子中执行 JavaScript 动画逻辑：

export default {
 methods: {
   onBeforeEnter(el) {
     // 进入前
   },
   onEnter(el, done) {
     // 进入时
     done() // 必须调用 done 来表示过渡结束
   },
   onAfterEnter(el) {
     // 进入后
   },
   onBeforeLeave(el) {
     // 离开前
   },
   onLeave(el, done) {
     // 离开时
     done() // 必须调用 done 来表示过渡结束
   },
   onAfterLeave(el) {
     // 离开后
   }
 }
}

这些钩子可以与 CSS 过渡或动画结合使用，也可以单独使用。

可复用的过渡组件： 你可以创建一个封装了过渡逻辑的组件，使其可以在多个地方复用：

<template>
 <Transition name="my-transition">
   <slot></slot>
 </Transition>
</template>

动态过渡： <Transition> 的 name 属性可以是动态的，这样你就可以根据不同的状态应用不同的过渡效果：

<Transition :name="transitionName">
 <!-- 内容 -->
</Transition>

Vue Router 过渡： 如果你使用 Vue Router，可以在 <router-view> 中使用 <Transition> 来为不同的路由提供过渡效果：

<router-view v-slot="{ Component }">
 <transition name="fade">
   <component :is="Component" />
 </transition>
</router-view>

过渡模式： 你可以通过 mode 属性来控制进入和离开的顺序：

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

这将确保当前元素先离开，然后新元素再进入。

使用 key 属性过渡： 有时候你可能需要强制重新渲染 DOM 元素来触发过渡，这时可以使用 key 属性：

<div :key="uniqueKey">内容</div>

以上是 Vue 3 中实现过渡效果的一些基本方法。你可以根据具体需求选择合适的方式来实现过渡效果。更多详细信息和高级用法，可以参考 Vue 官方文档 。