当前位置：首页 > VUE

vue实现页面载入动画

2026-02-22 08:49:46VUE

vue实现页面载入动画的方法

使用Vue实现页面载入动画可以通过多种方式完成，以下是几种常见的方法：

使用CSS动画和Vue生命周期钩子

在Vue组件的mounted或created钩子中触发CSS动画。定义一个包含动画效果的CSS类，通过Vue的数据绑定控制类的添加和移除。

<template>
  <div class="loading-animation" v-if="isLoading">
    <div class="spinner"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isLoading: true
    }
  },
  mounted() {
    setTimeout(() => {
      this.isLoading = false
    }, 2000)
  }
}
</script>

<style>
.loading-animation {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: white;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

.spinner {
  width: 50px;
  height: 50px;
  border: 5px solid #f3f3f3;
  border-top: 5px solid #3498db;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
</style>

使用Vue过渡效果

Vue提供了内置的过渡系统，可以通过<transition>组件实现页面载入动画。

<template>
  <transition name="fade">
    <div v-if="showContent" class="content">
      <!-- 页面内容 -->
    </div>
  </transition>
</template>

<script>
export default {
  data() {
    return {
      showContent: false
    }
  },
  mounted() {
    setTimeout(() => {
      this.showContent = true
    }, 1000)
  }
}
</script>

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

使用第三方库

可以集成专门的动画库如Animate.css或GSAP来实现更复杂的载入动画效果。

<template>
  <div class="animated fadeIn" v-if="isLoading">
    Loading...
  </div>
</template>

<script>
import 'animate.css'
export default {
  data() {
    return {
      isLoading: true
    }
  },
  mounted() {
    setTimeout(() => {
      this.isLoading = false
    }, 1500)
  }
}
</script>

路由过渡动画

在Vue Router中可以为路由切换添加过渡效果，这也可以用作页面载入动画。

<template>
  <transition name="slide-fade">
    <router-view></router-view>
  </transition>
</template>

<style>
.slide-fade-enter-active {
  transition: all .3s ease;
}
.slide-fade-leave-active {
  transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
}
.slide-fade-enter, .slide-fade-leave-to {
  transform: translateX(10px);
  opacity: 0;
}
</style>