vue实现资源加载动画

Vue 实现资源加载动画的方法

使用 CSS 动画和 Vue 过渡

在 Vue 中可以通过 v-if 或 v-show 控制加载动画的显示隐藏，结合 CSS 动画实现平滑过渡效果。以下是一个简单的实现示例：

<template>
  <div>
    <div v-if="isLoading" class="loading-spinner"></div>
    <div v-else>加载完成的内容</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isLoading: true
    }
  },
  mounted() {
    setTimeout(() => {
      this.isLoading = false
    }, 2000) // 模拟加载延迟
  }
}
</script>

<style>
.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); }
}
</style>

使用第三方库（如 Vue Loading Overlay）

对于更复杂的加载动画，可以使用专门的 Vue 加载动画库，如 vue-loading-overlay：

安装依赖：

npm install vue-loading-overlay

使用示例：

<template>
  <div>
    <button @click="showLoading">加载数据</button>
    <loading v-model:active="isLoading" :can-cancel="true" :on-cancel="onCancel" />
  </div>
</template>

<script>
import Loading from 'vue-loading-overlay'
import 'vue-loading-overlay/dist/vue-loading.css'

export default {
  components: { Loading },
  data() {
    return {
      isLoading: false
    }
  },
  methods: {
    showLoading() {
      this.isLoading = true
      setTimeout(() => {
        this.isLoading = false
      }, 3000)
    },
    onCancel() {
      this.isLoading = false
    }
  }
}
</script>

骨架屏加载效果

骨架屏是一种更高级的加载动画，可以在内容加载前展示页面的大致结构：

<template>
  <div>
    <div v-if="loading" class="skeleton-container">
      <div class="skeleton-item"></div>
      <div class="skeleton-item"></div>
      <div class="skeleton-item"></div>
    </div>
    <div v-else>实际内容</div>
  </div>
</template>

<style>
.skeleton-container {
  width: 100%;
  padding: 20px;
}

.skeleton-item {
  height: 20px;
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  margin-bottom: 10px;
  border-radius: 4px;
}

@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
</style>

路由切换加载动画

在 Vue Router 中实现页面切换时的加载动画：

<template>
  <div>
    <router-view v-slot="{ Component }">
      <transition name="fade" mode="out-in">
        <component :is="Component" v-if="!isLoading" />
        <div v-else class="loading-page">加载中...</div>
      </transition>
    </router-view>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isLoading: false
    }
  },
  watch: {
    '$route'() {
      this.isLoading = true
      setTimeout(() => {
        this.isLoading = false
      }, 500)
    }
  }
}
</script>

<style>
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

.loading-page {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  font-size: 24px;
}
</style>

图片懒加载动画

实现图片加载时的占位和过渡效果：

<template>
  <div class="image-container">
    <img 
      v-for="(image, index) in images" 
      :key="index" 
      :src="image.url" 
      @load="image.loaded = true"
      :class="{ 'loaded': image.loaded }"
      alt=""
    >
  </div>
</template>

<script>
export default {
  data() {
    return {
      images: [
        { url: 'image1.jpg', loaded: false },
        { url: 'image2.jpg', loaded: false }
      ]
    }
  }
}
</script>

<style>
.image-container img {
  opacity: 0;
  transition: opacity 0.5s ease;
}

.image-container img.loaded {
  opacity: 1;
}
</style>

这些方法可以根据实际需求组合使用，创建更丰富的加载动画效果。