vue3transition动画示例

Vue 3 的 `@vuejs/transition` 提供了一种简单的方式来创建和管理动画效果。它是一个基于 Web Animations API 的轻量级库，非常适合在 Vue 中添加过渡和动画。

下面是一个简单的例子，展示了如何在 Vue 3 中使用 `v-enter` 和 `v-leave-to` 动画钩子：

<template>
  <button @click="show = !show" v-transition>
    Show/Hide
  </button>

  <div v-if="show" v-transition>
    This is a transitioning element.
  </div>
</template>

<script>
import { onMounted } from "vue";
import { createNamespacedKeyframes } from "@vuejs/transition";

export default {
  setup() {
    const show = ref(false);

    // 创建动画名称空间
    const enterTransition = createNamespacedKeyframes("enter", [{ opacity: 0 }, { opacity: 1 }]);
    const leaveTransition = createNamespacedKeyframes("leave", [{ opacity: 1 }, { opacity: 0 }]);

    onMounted(() => {
      // 当元素第一次进入视图时应用动画
      show.value && show.value.enter();
      // 当元素离开视图时应用动画
      show.value === false && show.value.leave();
    });

    return {
      show,
    };
  },
};
</script>

<style scoped>
.v-enter-active, .v-leave-active {
  transition: all 0.5s;
}

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

在这个例子中，当按钮点击时，会切换包含的内容块的显示状态。`.v-enter` 和 `.v-leave-to` 规则设置了初始和结束时的透明度为 0，`v-enter-active` 和 `v-leave-active` 则指定了整个过渡过程的样式。