详解Vue3中的内置组件（transition）

在这里插入图片描述

本文主要介绍Vue3中的内置组件（transition）的普通写法和setup写法。

一、在普通写法中使用内置组件（transition）

Vue3中<transition>组件的用法如下：

<transition name="fade" mode="out-in">
  <div v-if="show" key="1">Content</div>
</transition>

在上面的代码中，<transition>组件包裹了一个<div>元素。当show为true时，<div>元素会被插入到DOM中，并且在插入时会有一个淡入的过渡效果。当show为false时，<div>元素会从DOM中删除，并且在删除时会有一个淡出的过渡效果。

在<transition>组件中，可以设置以下属性来控制过渡效果：

name：定义过渡效果的类名。Vue会自动为该类名添加前缀，例如-enter、-leave等。
type：定义过渡效果的类型，默认为transition，可选值为transition或animation。
mode：定义过渡模式。有以下几种模式可选：
- in-out：新元素先进行过渡，然后当前元素进行过渡。
- out-in：当前元素先进行过渡，然后新元素进行过渡。
duration：定义过渡的持续时间，可以是一个数字或一个对象，对象可以设置enter、leave和appear三种状态的持续时间。
appear：是否在初始渲染时显示过渡效果，默认为false。
css：是否使用CSS过渡，默认为true。如果设置为false，则需要手动编写过渡效果的JavaScript逻辑。
onBeforeEnter、onEnter、onAfterEnter、onBeforeLeave、onLeave、onAfterLeave、onBeforeAppear、onAppear、onAfterAppear：过渡的各个阶段的钩子函数。

在Vue3中，<transition>组件的过渡效果可以通过新的API来自定义，例如使用<transition>组件的<template v-slot:>语法来自定义过渡效果的持续时间和钩子函数。

二、在setup写法中使用内置组件（transition）

在Vue3中，可以使用<script setup lang="ts">来编写组件的逻辑部分，包括定义内置组件<transition>的过渡效果。

下面是一个在<script setup lang="ts">中使用<transition>组件的示例：

<template>
  <div>
    <button @click="toggle">Toggle</button>
    <transition name="fade" mode="out-in">
      <div v-if="show" key="1">Content</div>
    </transition>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const show = ref(false)

const toggle = () => {
  show.value = !show.value
}
</script>

在上面的代码中，我们首先使用import语句导入了ref函数。然后，在<script setup lang="ts">中定义了一个名为show的响应式变量，初始值为false。接下来，我们定义了一个名为toggle的函数，用于切换show的值。在按钮的@click事件中，我们调用了toggle函数。

在<template>部分，我们使用了<transition>组件来包裹一个<div>元素。当show为true时，<div>元素会被插入到DOM中，并且在插入时会有一个淡入的过渡效果。当show为false时，<div>元素会从DOM中删除，并且在删除时会有一个淡出的过渡效果。

通过使用<script setup lang="ts">，我们可以在组件的逻辑部分直接使用响应式变量和方法，而无需在setup()函数中显式地返回一个对象。这样可以让我们的代码更加简洁和易读。

三、使用注意项

在使用 Vue 3 中的内置组件 transition 时，有一些需要注意的地方：

导入 transition 组件：在 Vue 3 中，transition 组件已经被重命名为 Transition，所以在导入时需要使用 import { Transition } from 'vue'。
使用 Transition 组件：在 Vue 3 中，Transition 组件的使用方式与 Vue 2 有一些不同。首先，Transition 组件的标签名已经改为 <transition>...</transition>，而不再是 <transition-group>...</transition-group>。此外，Transition 组件的属性也有一些改变，例如 name 属性改为 name 或 appear、appear-from-class、appear-to-class 等属性改为 appear、enter-from-class、enter-to-class 等属性。
使用不同的过渡类名：在 Vue 3 中，过渡类名的生成方式也有所改变。以前，Vue 2 默认使用 v- 前缀加上过渡类型名称作为类名，例如 v-enter、v-leave-to 等。而在 Vue 3 中，使用了更加直观的类名，例如 enter-active、leave-active 等。这意味着在使用自定义过渡类名时，需要根据 Vue 3 的类名规则进行相应的修改。
使用 v-if 和 v-show：在 Vue 3 中，transition 组件不再支持与 v-if 和 v-show 一起使用。如果需要在组件动态切换时实现过渡效果，可以考虑使用 transition 组件的 appear 属性或 Transition 组件的 v-if 和 v-else。
使用 JSX：如果在 Vue 3 中使用 JSX 的方式来写模板代码，需要注意 Transition 组件的使用方式与普通模板的略有不同。在 JSX 中，需要使用 v-slots 来定义过渡的内容，并且 Transition 组件需要使用闭合标签 <Transition></Transition>。