详解Vue3中的内置组件(transition)

发布时间:2023年12月24日

在这里插入图片描述

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

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

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

一、在普通写法中使用内置组件(transition)

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

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

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

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

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

在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>元素。当showtrue时,<div>元素会被插入到DOM中,并且在插入时会有一个淡入的过渡效果。当showfalse时,<div>元素会从DOM中删除,并且在删除时会有一个淡出的过渡效果。

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

三、使用注意项

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

  1. 导入 transition 组件:在 Vue 3 中,transition 组件已经被重命名为 Transition,所以在导入时需要使用 import { Transition } from 'vue'

  2. 使用 Transition 组件:在 Vue 3 中,Transition 组件的使用方式与 Vue 2 有一些不同。首先,Transition 组件的标签名已经改为 <transition>...</transition>,而不再是 <transition-group>...</transition-group>。此外,Transition 组件的属性也有一些改变,例如 name 属性改为 nameappearappear-from-classappear-to-class 等属性改为 appearenter-from-classenter-to-class 等属性。

  3. 使用不同的过渡类名:在 Vue 3 中,过渡类名的生成方式也有所改变。以前,Vue 2 默认使用 v- 前缀加上过渡类型名称作为类名,例如 v-enterv-leave-to 等。而在 Vue 3 中,使用了更加直观的类名,例如 enter-activeleave-active 等。这意味着在使用自定义过渡类名时,需要根据 Vue 3 的类名规则进行相应的修改。

  4. 使用 v-ifv-show:在 Vue 3 中,transition 组件不再支持与 v-ifv-show 一起使用。如果需要在组件动态切换时实现过渡效果,可以考虑使用 transition 组件的 appear 属性或 Transition 组件的 v-ifv-else

  5. 使用 JSX:如果在 Vue 3 中使用 JSX 的方式来写模板代码,需要注意 Transition 组件的使用方式与普通模板的略有不同。在 JSX 中,需要使用 v-slots 来定义过渡的内容,并且 Transition 组件需要使用闭合标签 <Transition></Transition>

文章来源:https://blog.csdn.net/aahwj/article/details/135169701
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。