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> 标签加了一个 v-if 指令，并用 <transition> 包裹它。

2. name="fade"：为过渡效果指定一个名称（这里是 fade），这样可以方便地在 CSS 中定义对应的类名。

3. CSS 过渡类：

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

4. 按钮点击事件：通过 @click="toggle" 触发 toggle 方法，改变 show 的值，从而触发过渡效果。

这个示例展示了如何使用 Vue 的 <transition> 组件来实现简单的淡入淡出效果。