vue3内置组件Transition简单介绍和应用

在Vue 3中，内置的<Transition>组件可以用来包装需要过渡效果的元素，它会在元素的出现和消失过程中自动应用CSS效果。

下面是一个简单的例子，展示如何使用<Transition>组件：

<template>
  <button @click="show = !show">
    Toggle
  </button>
  <Transition name="fade">
    <p v-if="show">Hello World!</p>
  </Transition>
</template>
 
<script setup>
import { ref } from 'vue'
 
const show = ref(true)
</script>
 
<style>
/* 定义进入和退出的过渡效果 */
.fade-enter-active, .fade-leave-active {
  transition: opacity 0.5s ease;
}
.fade-enter-from, .fade-leave-to {
  opacity: 0;
}
</style>

在这个例子中，一个段落(<p>)通过v-if指令与show变量绑定，show变量的值通过按钮点击事件进行切换。<Transition>组件包裹了这个段落，并通过name属性指定了过渡的效果类名前缀"fade"。CSS中定义了两个类：.fade-enter-active和.fade-leave-active用于指定进入和退出过渡的状态，而.fade-enter-from和.fade-leave-to定义了初始状态和结束状态的样式。当show变量为true时显示段落，为false时段落消失，并应用淡入淡出的过渡效果。