当前位置：首页 > VUE

vue实现页面载入动画

2026-01-21 17:34:54VUE

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

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

在 Vue 组件的 mounted 或 created 钩子中触发动画效果，结合 CSS 动画或过渡实现平滑的载入效果。CSS 部分可以定义关键帧动画或过渡属性，Vue 部分通过数据绑定控制动画的显示与隐藏。

<template>
  <div class="loader" v-if="loading">
    <!-- 加载动画内容 -->
  </div>
  <div v-else>
    <!-- 页面内容 -->
  </div>
</template>

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

<style>
.loader {
  animation: fadeIn 1s ease-out;
}
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
</style>

使用第三方动画库（如 Animate.css）

通过引入 Animate.css 等现成的动画库，快速实现丰富的载入效果。在 Vue 组件中直接应用库提供的动画类名。

<template>
  <div class="animate__animated animate__fadeIn" v-if="loading">
    Loading...
  </div>
</template>

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

结合 Vue Transition 组件

利用 Vue 内置的 <transition> 组件实现进入/离开动画，适用于路由切换或元素动态显示的场景。

<template>
  <transition name="fade">
    <div v-if="showContent">Loaded!</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>

路由级加载动画（Vue Router）

在路由配置中使用 <transition> 包裹 <router-view>，配合路由守卫控制全局页面切换动画。

<template>
  <transition name="slide" mode="out-in">
    <router-view/>
  </transition>
</template>

<style>
.slide-enter-active {
  animation: slideIn .3s;
}
.slide-leave-active {
  animation: slideOut .3s;
}
@keyframes slideIn {
  from { transform: translateX(100%); }
  to { transform: translateX(0); }
}
@keyframes slideOut {
  from { transform: translateX(0); }
  to { transform: translateX(-100%); }
}
</style>

使用 Loading 状态管理（Vuex）

对于复杂应用，可通过 Vuex 集中管理加载状态，统一控制多个组件的载入动画显示。

vue实现页面载入动画

// store.js
export default new Vuex.Store({
  state: { isLoading: false },
  mutations: {
    setLoading(state, payload) {
      state.isLoading = payload
    }
  }
})

<!-- 组件中使用 -->
<template>
  <spinner v-if="$store.state.isLoading"/>
</template>

标签: 页面动画

分享给朋友：

vue实现页面定位

Vue 实现页面定位的方法在 Vue 中实现页面定位通常可以通过以下几种方式完成，包括使用原生 JavaScript 的 scrollIntoView 方法、Vue Router 的滚动行为配置，以…

vue实现反馈页面

Vue 实现反馈页面的方法基础表单结构使用 Vue 的模板语法构建反馈表单，包含输入框、下拉选择、复选框等基础元素。表单需绑定 v-model 实现数据双向绑定。 <template>…

vue文件实现页面跳转

使用 router-link 实现跳转在 Vue 模板中直接使用 <router-link> 组件，通过 to 属性指定目标路径： <router-link to="/tar…

h5实现登录页面跳转页面跳转页面跳转页面

实现登录页面跳转的方法在H5中实现登录页面跳转可以通过多种方式完成，以下是一些常见的方法：使用JavaScript的window.location方法通过JavaScript的window.l…

h5页面实现vr

实现H5页面VR效果的方法在H5页面中实现VR（虚拟现实）效果，可以通过以下几种技术方案实现：使用WebVR API WebVR是一个实验性的JavaScript API，提供了访问VR设备的功…

vue实现页面定位

Vue 实现页面定位的方法使用 scrollIntoView 方法通过 JavaScript 的 scrollIntoView 方法可以实现平滑滚动到指定元素位置。在 Vue 中，可以通过 ref…

vue实现页面载入动画