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>
