nuxt之页面加载动画的实现

在Nuxt中，可以使用CSS动画和Vue的过渡来实现页面加载动画。以下是一种实现方式：

1. 创建一个全局的CSS样式文件（例如global.css），在其中定义页面加载时的动画效果。例如，可以使用@keyframes来定义一个旋转的动画：

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.loading {
  animation: spin 1s linear infinite;
}

2. 在Nuxt的根组件中，使用<transition>元素来包裹整个页面内容，在页面加载时触发过渡效果。可以使用<nuxt>组件来渲染动态的页面内容。例如：

<template>
  <div>
    <transition name="fade" mode="out-in">
      <div v-if="loading" class="loading">
        <!-- 加载动画 -->
      </div>
      <div v-else>
        <nuxt />
      </div>
    </transition>
  </div>
</template>

loading是一个响应式的数据，可以在data方法中定义并初始化为true。在页面加载完成后，将其设置为false。

3. 在根组件的script中，可以使用Nuxt提供的asyncData方法来获取一些初始数据，在数据加载完成后，将loading设置为false。例如：

export default {
  data() {
    return {
      loading: true
    }
  },
  async asyncData({ $axios }) {
    // 获取初始数据
    const res = await $axios.get('/api/data')
    // 返回结果
    return {
      data: res.data
    }
  },
  mounted() {
    // 数据加载完成后，将loading设置为false
    this.loading = false
  }
}

4. 在根组件的style中导入全局的CSS样式文件：

<style>
@import '~assets/global.css';
</style>

这样，在页面加载时，会显示一个加载动画，直到页面完成加载后才显示真正的内容。