当前位置：首页 > VUE

vue怎么实现载入动画

2026-02-24 16:12:17VUE

实现载入动画的方法

使用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)
})

vue怎么实现载入动画