vue transition组件

<template>
  <div id="app">
    <!-- 使用 transition 组件包裹需要过渡效果的元素 -->
    <transition name="fade">
      <p v-if="show">Hello Vue Transition!</p>
    </transition>
    <button @click="toggle">Toggle</button>
  </div>
</template>

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

<style>
/* 定义进入和离开的过渡效果 */
.fade-enter-active, .fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active in <2.1.8 */ {
  opacity: 0;
}
</style>

解释说明：

1. <transition> 组件：用于包裹需要添加过渡效果的元素。在这个例子中，<p> 标签被 <transition> 包裹，当 v-if 控制的 show 变量改变时，会触发过渡效果。

2. name="fade"：为过渡类名提供一个基础名称，Vue 会根据这个名称自动生成相关的 CSS 类（如 .fade-enter、.fade-leave 等）。

3. CSS 过渡类：

   • .fade-enter-active 和 .fade-leave-active：定义进入和离开时的过渡效果（例如，淡入淡出的时间）。
   • .fade-enter 和 .fade-leave-to：定义进入和离开时的初始状态（例如，透明度为 0）。

4. v-if="show"：控制元素是否显示，点击按钮时切换 show 的值，从而触发过渡效果。

5. @click="toggle"：绑定点击事件，调用 toggle 方法来切换 show 的布尔值。