页面加载动画 vue3

在 Vue 3 中实现页面加载动画有几种方法，以下是其中两种常见的方式：

1. 使用过渡动画（Transitions）：Vue 3 提供了 `<transition>` 组件，它可以用来包装要有动画效果的元素。你可以在元素进入或离开 DOM 时添加类名来触发动画效果。下面是一个简单的示例：

<template>
  <transition name="fade">
    <div v-if="isLoading" class="loading-overlay">
      <!-- 加载动画的内容 -->
    </div>
    <div v-else>
      <!-- 页面的内容 -->
    </div>
  </transition>
</template>

<script>
export default {
  data() {
    return {
      isLoading: true,
    };
  },
  mounted() {
    // 模拟加载延迟
    setTimeout(() => {
      this.isLoading = false;
    }, 2000);
  },
};
</script>

<style>
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter,
.fade-leave-to {
  opacity: 0;
}
.loading-overlay {
  /* 加载动画的样式 */
}
</style>

在上述示例中，当 `isLoading` 的值为 `true` 时，显示加载动画；当 `isLoading` 的值为 `false` 时，显示页面内容。

2. 使用第三方库：除了使用 Vue 内置的过渡动画，你还可