vue实现加载动画

vue实现加载动画的方法

在Vue中实现加载动画可以通过多种方式，以下是几种常见的方法：

使用CSS动画 通过Vue的过渡系统结合CSS动画实现加载效果。定义一个简单的旋转动画：

.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="loading" class="spinner"></div>
</template>

使用第三方库 Vue生态系统中有许多专门用于加载动画的库，如vue-spinner、vue-loading-overlay等。安装后直接引入组件：

import Loading from 'vue-loading-overlay';
import 'vue-loading-overlay/dist/vue-loading.css';

export default {
  components: {
    Loading
  }
}

在模板中使用：

<loading :active.sync="isLoading" :can-cancel="true"></loading>

基于条件渲染的动画 结合Vue的v-if和过渡效果实现加载状态切换：

<transition name="fade">
  <div v-if="loading" class="loading-message">
    <p>Loading...</p>
  </div>
</transition>

配套CSS：

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

骨架屏技术 在数据加载前显示内容的大致轮廓：

<div v-if="loading" class="skeleton">
  <div class="skeleton-header"></div>
  <div class="skeleton-content"></div>
</div>

样式示例：

.skeleton {
  width: 100%;
}
.skeleton-header {
  height: 40px;
  background: linear-gradient(90deg,#f2f2f2 25%,#e6e6e6 50%,#f2f2f2 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}
@keyframes shimmer {
  from { background-position: 200% 0; }
  to { background-position: -200% 0; }
}

进度条加载 对于页面级加载，可以使用类似nprogress的库：

import NProgress from 'nprogress'
import 'nprogress/nprogress.css'

// 在路由守卫或axios拦截器中调用
NProgress.start()
NProgress.done()

这些方法可以根据具体需求选择或组合使用，CSS动画适合简单场景，第三方库提供更多功能选项，骨架屏能提升用户体验，进度条适用于页面导航场景。