vue实现页面载入动画

Vue 实现页面载入动画的方法

使用 CSS 动画和 Vue 生命周期钩子

在 Vue 组件的 mounted 或 created 钩子中触发动画效果，结合 CSS 动画或过渡实现平滑的载入效果。CSS 部分可以定义关键帧动画或过渡属性，Vue 部分通过数据绑定控制动画的显示与隐藏。

<template>
  <div class="loader" v-if="loading">
    <!-- 加载动画内容 -->
  </div>
  <div v-else>
    <!-- 页面内容 -->
  </div>
</template>

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

<style>
.loader {
  animation: fadeIn 1s ease-out;
}
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
</style>

使用第三方动画库（如 Animate.css）

通过引入 Animate.css 等现成的动画库，快速实现丰富的载入效果。在 Vue 组件中直接应用库提供的动画类名。

<template>
  <div class="animate__animated animate__fadeIn" v-if="loading">
    Loading...
  </div>
</template>

<script>
import 'animate.css'
export default {
  data() {
    return { loading: true }
  },
  mounted() {
    setTimeout(() => { this.loading = false }, 1500)
  }
}
</script>

结合 Vue Transition 组件

利用 Vue 内置的 <transition> 组件实现进入/离开动画，适用于路由切换或元素动态显示的场景。

<template>
  <transition name="fade">
    <div v-if="showContent">Loaded!</div>
  </transition>
</template>

<script>
export default {
  data() {
    return { showContent: false }
  },
  mounted() {
    setTimeout(() => { this.showContent = true }, 1000)
  }
}
</script>

<style>
.fade-enter-active, .fade-leave-active {
  transition: opacity .5s;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}
</style>

路由级加载动画（Vue Router）

在路由配置中使用 <transition> 包裹 <router-view>，配合路由守卫控制全局页面切换动画。

<template>
  <transition name="slide" mode="out-in">
    <router-view/>
  </transition>
</template>

<style>
.slide-enter-active {
  animation: slideIn .3s;
}
.slide-leave-active {
  animation: slideOut .3s;
}
@keyframes slideIn {
  from { transform: translateX(100%); }
  to { transform: translateX(0); }
}
@keyframes slideOut {
  from { transform: translateX(0); }
  to { transform: translateX(-100%); }
}
</style>

使用 Loading 状态管理（Vuex）

对于复杂应用，可通过 Vuex 集中管理加载状态，统一控制多个组件的载入动画显示。

// store.js
export default new Vuex.Store({
  state: { isLoading: false },
  mutations: {
    setLoading(state, payload) {
      state.isLoading = payload
    }
  }
})

<!-- 组件中使用 -->
<template>
  <spinner v-if="$store.state.isLoading"/>
</template>