vue怎么实现载入动画
实现载入动画的方法
使用CSS动画和Vue过渡
在Vue中可以通过<transition>组件结合CSS动画实现载入效果。定义一个简单的旋转动画，通过v-if或v-show控制显示状态。
<template>
<div>
<transition name="fade">
<div v-if="isLoading" class="loader"></div>
</transition>
</div>
</template>
<style>
.loader {
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); }
}
.fade-enter-active, .fade-leave-active {
transition: opacity 0.5s;
}
.fade-enter, .fade-leave-to {
opacity: 0;
}
</style>使用第三方库
借助像vue-simple-spinner或vue-loading-overlay这样的库可以快速实现专业动画效果。安装后直接调用组件即可。
npm install vue-simple-spinner<template>
<vue-simple-spinner size="medium"/>
</template>
<script>
import VueSimpleSpinner from 'vue-simple-spinner'
export default {
components: { VueSimpleSpinner }
}
</script>异步数据加载时显示
在数据请求期间自动显示加载动画，使用axios拦截器或async/await配合状态管理。
data() {
return {
isLoading: false,
data: null
}
},
methods: {
async fetchData() {
this.isLoading = true
try {
const response = await axios.get('/api/data')
this.data = response.data
} finally {
this.isLoading = false
}
}
}骨架屏技术 对于内容区域，可以使用骨架屏(Skeleton Screen)提升用户体验。通过占位元素模拟内容结构，数据加载完成后替换为真实内容。
<div v-if="loading" class="skeleton">
<div class="skeleton-line"></div>
<div class="skeleton-line"></div>
</div>
<div v-else>
<!-- 实际内容 -->
</div>
<style>
.skeleton-line {
height: 20px;
background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
background-size: 200% 100%;
animation: shimmer 1.5s infinite;
}
</style>路由切换动画 在Vue Router中为路由切换添加加载动画，通过全局前置守卫控制加载状态。
router.beforeEach((to, from, next) => {
store.commit('setLoading', true)
next()
})
router.afterEach(() => {
setTimeout(() => store.commit('setLoading', false), 500)
})
