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

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

在Vue3中，内置了一些组件，其中之一是组件。组件用于在元素插入或删除时，为其添加过渡效果。

在Vue2中，组件使用name属性来定义过渡效果的类名，然后使用CSS来实现具体的过渡效果。而在Vue3中，组件使用了新的API来定义过渡效果。

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

Vue3中组件的用法如下：

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

在上面的代码中，组件包裹了一个

元素。当show为true时，

元素会被插入到DOM中，并且在插入时会有一个淡入的过渡效果。当show为false时，

元素会从DOM中删除，并且在删除时会有一个淡出的过渡效果。

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

• 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中，组件的过渡效果可以通过新的API来自定义，例如使用组件的