当前位置：首页 > 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 组件中直接应用库提供的动画类名。

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）

vue实现页面载入动画

在路由配置中使用 <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 集中管理加载状态，统一控制多个组件的载入动画显示。

// 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 提供了多种方式来实现动画效果，包括内置的过渡系统、第三方动画库以及直接操作 CSS 或 JavaScript 动画。使用 Vue 内置过渡系统 Vue 的 <…

vue 实现页面注册

Vue 实现页面注册功能创建注册表单组件在 Vue 项目中创建一个注册表单组件，通常命名为 Register.vue。该组件包含用户名、邮箱、密码等输入字段，以及提交按钮。 <templa…

vue实现的页面

Vue 实现的页面示例 Vue.js 是一个渐进式 JavaScript 框架，用于构建用户界面。以下是一个简单的 Vue 页面实现示例，包含基本的结构和功能。安装 Vue 通过 CDN 引入…

vue实现gif动画

Vue 中实现 GIF 动画的方法在 Vue 中实现 GIF 动画可以通过多种方式完成，具体取决于需求和使用场景。以下是几种常见的方法：直接使用 <img> 标签加载 GIF 最简单…

vue 实现页面跳转

vue 实现页面跳转的方法在 Vue 中实现页面跳转主要通过路由（Vue Router）完成，以下是几种常见的方式：声明式导航（模板中使用 <router-link>）在模板中直…

vue实现关闭页面

关闭当前页面的方法在Vue中关闭当前页面可以通过JavaScript的window.close()方法实现。该方法会关闭当前浏览器窗口或标签页。 methods: { closePage()…

vue实现页面载入动画