（三）纯 CSS 进场/离场动画的问题

<!-- 通过v-if 来控制 动画过度的问题 -->
 <template>
  <main>
    <div class="container">
      <button @click="show = !show">{{ show ? "隐藏" : "显示" }}</button>
      <div v-if="show" :class="animationClasses"></div>
    </div>
  </main>
</template>

<script setup>
import { ref, watchEffect } from "vue";
// 控制元素的显示与隐藏
const show = ref(false);

// 动态设置class
const animationClasses = ref(["box"]);

watchEffect(() => {
  if (show.value) {
    // 显示添加这个动画
    animationClasses.value = ["box", "box-enter"];
  } else {
    // 不显示添加这个动画
    animationClasses.value = ["box", "box-leave"];
  }
});
</script>

<style>
  .box-enter {
  animation: fade 0.5s;
}

.box-leave {
  animation: fade 0.5s reverse;
}

@keyframes fade {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
</style>