vue实现加载动画
Vue 实现加载动画的方法
在 Vue 中实现加载动画可以通过多种方式完成，以下是一些常见的方法：
使用 CSS 动画
通过 CSS 定义动画效果，结合 Vue 的动态类绑定实现加载动画。以下是一个简单的旋转加载动画示例：
<template>
<div class="loading-container">
<div class="spinner" v-if="isLoading"></div>
</div>
</template>
<script>
export default {
data() {
return {
isLoading: true
}
}
}
</script>
<style>
.spinner {
width: 40px;
height: 40px;
border: 4px solid rgba(0, 0, 0, 0.1);
border-radius: 50%;
border-left-color: #09f;
animation: spin 1s linear infinite;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
</style>使用第三方库
Vue 生态中有许多优秀的加载动画库，如 vue-loading-spinner 或 vue-spinners，可以快速集成丰富的动画效果。
安装 vue-spinners：
npm install vue-spinners使用示例：
<template>
<div>
<clip-loader :loading="isLoading" color="#36D7B7" size="50px"></clip-loader>
</div>
</template>
<script>
import { ClipLoader } from 'vue-spinners'
export default {
components: {
ClipLoader
},
data() {
return {
isLoading: true
}
}
}
</script>自定义过渡动画
利用 Vue 的过渡系统 (<transition>) 实现加载动画，适合页面或组件切换时的加载效果。
<template>
<transition name="fade">
<div v-if="isLoading" class="loading-overlay">
<div class="loading-content">Loading...</div>
</div>
</transition>
</template>
<style>
.fade-enter-active, .fade-leave-active {
transition: opacity 0.5s;
}
.fade-enter, .fade-leave-to {
opacity: 0;
}
.loading-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
display: flex;
justify-content: center;
align-items: center;
}
</style>骨架屏加载动画
骨架屏是一种流行的加载方式，在内容加载前显示占位图形。
<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;
margin-bottom: 10px;
}
@keyframes shimmer {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
</style>全局加载动画
通过 Vue 的全局状态管理（如 Vuex）或事件总线控制全局加载动画。
// 在 main.js 或单独的文件中
Vue.prototype.$showLoading = function() {
// 显示加载动画的逻辑
}
Vue.prototype.$hideLoading = function() {
// 隐藏加载动画的逻辑
}在组件中使用：
this.$showLoading()
// 执行异步操作
this.$hideLoading()以上方法可以根据项目需求灵活选择或组合使用。CSS 动画适合简单场景，第三方库提供丰富预设，骨架屏优化用户体验，全局加载适合复杂应用。
