vue3学习transition动画组件

在Vue 3中，你可以使用<transition>组件来为元素添加过渡效果。下面是一个简单的例子，演示如何使用Vue 3的<transition>组件。

<template>
  <div id="app">
    <button @click="show = !show">Toggle</button>
    <transition name="fade">
      <p v-if="show">Hello, Vue 3 Transition!</p>
    </transition>
  </div>
</template>
 
<script>
import { ref } from 'vue';
 
export default {
  setup() {
    const show = ref(true);
    return { show };
  },
};
</script>
 
<style>
/* 定义过渡样式 */
.fade-enter-active, .fade-leave-active {
  transition: opacity 0.5s ease;
}
.fade-enter-from, .fade-leave-to {
  opacity: 0;
}
</style>

在这个例子中，我们定义了一个简单的淡入淡出过渡效果。当show的值改变时，<p>元素会以淡入淡出的方式出现或消失。通过CSS定义了进入和离开的过渡状态。