vue3 组件过渡效果

Vue3 提供了一个内置组件 `<transition>` 来实现组件过渡效果。通过添加该组件，可以为组件的显示和消失添加过渡动画，从而增强用户体验。要使用 `<transition>` 组件，你需要在组件外部包裹该组件，并使用 `v-if` 或 `v-show` 来控制组件的显示和隐藏。

下面是一个示例代码，展示了如何使用 `<transition>` 组件来实现渐变过渡效果：

<template>
  <div>
    <button @click="toggle">Toggle</button>

    <transition name="fade">
      <p v-if="show">Hello, Vue3!</p>
    </transition>
  </div>
</template>

<script>
export default {
  data() {
    return {
      show: false
    };
  },
  methods: {
    toggle() {
      this.show = !this.show;
    }
  }
};
</script>

<style>
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s;
}

.fade-enter,
.fade-leave-to {
  opacity: 0;
}
</style>

在上述代码中，当点击按钮时，通过切换 `show` 的值来控制 `<p>` 元素的显示和隐藏。同时，通过添加名为 "fade" 的过渡类名，我们定义了渐变过渡效果的样式。