vue加载动画实现
Vue 加载动画实现方法
使用 CSS 动画或过渡
在 Vue 组件中可以直接通过 CSS 实现加载动画效果。定义一个简单的旋转动画：
.loading-spinner {
width: 40px;
height: 40px;
border: 4px solid #f3f3f3;
border-top: 4px solid #3498db;
border-radius: 50%;
animation: spin 1s linear infinite;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}在 Vue 模板中使用：
<template>
<div v-if="isLoading" class="loading-spinner"></div>
</template>使用第三方动画库
可以集成如 Animate.css 这样的 CSS 动画库：
npm install animate.css在 Vue 中使用：
import 'animate.css'<template>
<div
v-if="isLoading"
class="animate__animated animate__fadeIn animate__infinite"
>
Loading...
</div>
</template>基于 Vue 的过渡系统
利用 Vue 内置的 <transition> 组件实现加载过渡效果：
<template>
<transition name="fade">
<div v-if="isLoading" class="loading-overlay">
<!-- 加载内容 -->
</div>
</transition>
</template>
<style>
.fade-enter-active, .fade-leave-active {
transition: opacity 0.5s;
}
.fade-enter, .fade-leave-to {
opacity: 0;
}
</style>使用专用加载组件库
集成如 vue-loading-overlay 这样的专用库：
npm install vue-loading-overlay使用示例：
import Loading from 'vue-loading-overlay'
import 'vue-loading-overlay/dist/vue-loading.css'
export default {
components: {
Loading
},
data() {
return {
isLoading: false
}
}
}<template>
<loading :active.sync="isLoading" :can-cancel="false"/>
</template>骨架屏加载效果
实现内容加载前的占位效果：
<template>
<div v-if="isLoading" class="skeleton">
<div class="skeleton-line"></div>
<div class="skeleton-line"></div>
</div>
<div v-else>
<!-- 实际内容 -->
</div>
</template>
<style>
.skeleton-line {
height: 20px;
background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
background-size: 200% 100%;
animation: shimmer 1.5s infinite;
}
@keyframes shimmer {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
</style>路由切换加载动画
在 Vue Router 中实现页面切换时的加载动画：
// router.js
router.beforeEach((to, from, next) => {
store.commit('setLoading', true)
next()
})
router.afterEach(() => {
store.commit('setLoading', false)
})在 App.vue 中：
<template>
<div id="app">
<transition name="page" mode="out-in">
<router-view/>
</transition>
<loading :active="$store.state.isLoading"/>
</div>
</template>
<style>
.page-enter-active, .page-leave-active {
transition: opacity 0.3s, transform 0.3s;
}
.page-enter, .page-leave-to {
opacity: 0;
transform: translateY(10px);
}
</style>每种方法适用于不同场景，可以根据项目需求选择合适的实现方式。CSS 动画适合简单需求，专用组件库提供更多功能和自定义选项，骨架屏能提升用户体验。
