Vue SPA 初次进入加载动画实现

最新推荐文章于 2024-05-24 12:57:57 发布
最新推荐文章于 2024-05-24 12:57:57 发布
阅读量1.9k 收藏 1
点赞数
分类专栏： vue 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_31740027/article/details/81605428
版权

在app挂载的div同级处写一个加载动画，例如：

<body class="font-hei">
      <div class="wrap" id="loader">
          <div>
              <div class="mult2rect mult2rect1"></div>
              <div class="mult2rect mult2rect2"></div>
              <div class="mult2rect mult2rect3"></div>
              <div class="mult2rect mult2rect4"></div>
              <div class="mult2rect mult2rect5"></div>
          </div>
      </div>
    <div id="app" style="min-height: 100vh"></div>

加载完成后，在App.vue的钩子函数内移除这个div。


created: function() {
      document.body.removeChild(document.getElementById('loader'));
}
川大宝啊
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
CSS3扁平化谷歌Loading加载图标动画特效
06-11
一组简单好看的CSS3扁平化谷歌Loading加载图标动画特效，共有6种动画效果。
VueRouter路由跳转实现过度动画-利用transition组件（cv即可）
Asgfcsdn的博客
03-24 1953
VueRouter路由跳转实现过度动画（cv即可）
Vue3项目中加载动画的实现
最新发布
fafafafa_fa的博客
05-24 876
正常路由的引入方式通常会导致网页首屏加载时间过长，给用户带来不好的体验，所以我们通常使用路由懒加载的方式来引入路由，这样只会在使用到某个路由时才会去加载它，减少了初次加载的时间。
Vue实现网页首屏加载动画、页面内请求数据加载loading
在写作的路上持续输出。
11-17 1万+
Vue实现网页首屏加载动画、页面内请求数据加载loading
【vue】实现首屏加载等待动画 避免首次加载白屏尴尬
林毅洋
10-04 6412
原文链接 在线体验 &amp;amp;amp;amp;lt;!DOCTYPE html&amp;amp;amp;amp;gt; &amp;amp;amp;amp;lt;html&amp;amp;amp;amp;gt; &amp;amp;amp;amp;lt;head&amp;amp;amp;amp;gt; &amp;amp;amp;amp;lt;meta charset=&amp;amp;amp;quot;utf-8&amp;a
Vue设置全局loading（加载动画）功能：
SunPeng的博客
03-04 1万+
Vue设置全局loading（加载动画）功能：
vue element-ui Loading加载事件的使用以及自定义Loading加载动画
snrt_Aurora的博客
12-21 7932
怎么使用 Loading 加载事件
axios vue 加载效果动画_Vue 使用 axios 或者 vue-router 配置页面加载动画
weixin_39686353的博客
12-21 251
先提一笔，这篇文章是关于 Vue 页面加载动画的实现以下介绍两种方法使用 axios 配置全局中当发生 ajax 请求时，显示一个加载动画，当 ajax 请求结束后，隐藏加载动画使用 Vue-router 实现当页面跳转时有一个加载动画第一种方式， 配置 axios 实现加载动画在 axios 的拦截器中实现1. 在 App.vue 文件中添加你的加载动画组件 或者 HTML，因为加载动画是全局的...
vue页面出现正在加载的初始页面与实现动画效果
gang456789的博客
09-19 1万+
我们经常看到数据未出现时，页面中会有一条提示消息， 页面正在加载中，如何实现该效果呢 ，请看下面代码<template> <section class="page" v-if="option" :style="{background: option.background,color: option.color||'#fff'}" :class=
vue设置载入动画、初始化页面动画
weixin_42568343的博客
09-07 1万+
移动端页面载入时过长的白屏等待，总是让人心烦气躁 不如，加个小动画吧 原理很简单 在index.html页面的body插入一个div css里写入动画 在app.vue里 created的时候 将这个div移除就ok了   index.html CSS  app.vue 最终效果  ...
Vue SPA 初次进入加载动画实现代码
10-15
今天小编就为大家分享一篇Vue SPA 初次进入加载动画实现代码，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue-animated-list, 一个 Vue.js 插件，用于轻松设置 `v for` 渲染列表的动画.zip
10-10
vue-animated-list, 一个 Vue.js 插件，用于轻松设置 `v for` 渲染列表的动画 vue-animated-list注意：这个插件仅用于 Vue 。 Vue 2.0支持将动画移出框。一个 Vue.js 插件，用于轻松设置 v-for 渲染列表的动画。现场演示插件兼容性：IE10+ 。安装带模块的//
Vue-router 切换组件页面时进入进出动画方法
12-29
App.vue 代码 <template> <div id=app> <Header></Header> // 用transition 把切换组件页面的容器包含 <transition name=slide-fade> <router></router> </transition> </div> </template> [removed] import Header from './components/header' export default { name: 'app', components: {Header}, } [removed]
基于vue的页面加载动画
weixin_43844392的博客
09-18 9746
基本原理是，在window加载之前，渲染出加载动画，页面渲染完成后，移除加载动画即可 在vue项目中一般只需二步 第一步，写css和dom 在vue项目的index.html中引入css 第二步 在app.vue created中移除加载动画 运行效果： 这样加载动画就完成了。 ...
Vue - 详细实现网站首屏加载等待动画，在 vue 网页项目中实现页面加载时出现动画，解决加载白屏问题（提供详细示例代码，支持自定义 CSS 动画或 GIF 动图等）
王佳斌
01-27 7572
效果图 前言 解决白屏等待方案非常多，个人而言评判好坏的标准即 用最少最简单的代码实现相同的功能。 在 Vue 项目中，网站加载时会显示自定义动画（CSS），当文件加载完毕且页面显示时自动移除动画。 解决方案 原理：动画元素放置在 #app 内，Vue 生命周期开始时，会自动清掉 #app 下所有元素。 您可以打开控制台，将网速调慢后，观察 Elements 元素，当页面呈现的时候 <div id="app"></div> 就会被清除， 打开您的项目，找到根目录 pub
使用 vue-router 切换页面时怎么设置过渡动画
热门推荐
林楠楠的脚趾有点咸的博客
03-02 5万+
如何实现切换页面时的过渡动画? 背景 今天在编写页面时,看到页面没有任何效果就只是直入直出,完全没有一点逼格,所以想要实现类似于原生app的那种切换页面时的特效,遂开始google,发现网上各种方案都是各有优缺点,于是整理了自认为优雅的方案并记录下来. 实现难点 如何判断切换路由时是前进还是后退 每次切换时向左向右切换动画如何实现 解决方案 我们需要给各个页面定义层级
vue 组件按需引用，vue-router懒加载，vue打包优化，加载动画
weixin_30919571的博客
06-24 182
当打包构建应用时，Javascript 包会变得非常大，影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就更加高效了。 结合 Vue 的异步组件和 Webpack 的code splitting feature, 轻松实现路由组件的懒加载。 我们要做的就是把路由对应的组件定义成异步组件 const Foo = resolve...
Vue-route页面切换过渡动画
weixin_33724570的博客
05-14 1万+
重点： 1、判断路由前进还是后退 　　　　2、切换时动画如何实现 1、需要给各个页面定义层级，切换路由时判断进入哪个层级页面，如果进入层级高页面做前进动画，否则做后退动画在路由定义中添加meta自定义参数 　　　　 2、编写进出动画效果样式 　　　　此处注意：给<transition>外层div增加样式class="Router"，并给div下所有元素增加样式，如下.R...
vue3加载动画实现
04-17
Vue 3提供了一种简单而灵活的方式来实现加载动画。你可以使用Vue的transition组件和动画类来实现。 首先，你需要在Vue组件中使用transition组件来包裹需要添加动画的元素。transition组件可以根据元素的进入和离开状态来应用动画效果。 下面是一个简单的示例，展示了如何使用Vue 3的transition组件来实现加载动画： ```html <template> <div> <transition name="fade"> <div v-if="isLoading" class="loading"> <!-- 加载动画的内容 --> </div> </transition> <button @click="startLoading">开始加载</button> </div> </template> <script> export default { data() { return { isLoading: false }; }, methods: { startLoading() { this.isLoading = true; // 模拟加载过程 setTimeout(() => { this.isLoading = false; }, 2000); } } }; </script> <style> .fade-enter-active, .fade-leave-active { transition: opacity 0.5s; } .fade-enter, .fade-leave-to { opacity: 0; } .loading { /* 加载动画的样式 */ } </style> ``` 在上面的示例中，我们使用了Vue的transition组件，并给它设置了一个name属性为"fade"。然后，在需要添加加载动画的地方，我们使用v-if指令来控制元素的显示和隐藏。当isLoading为true时，元素会以淡入的动画效果显示出来；当isLoading为false时，元素会以淡出的动画效果隐藏起来。 你可以根据自己的需求，自定义transition组件的样式和动画效果。在上面的示例中，我们使用了fade-enter-active、fade-leave-active、fade-enter和fade-leave-to这几个类来定义了一个简单的淡入淡出效果。 希望这个示例能够帮助你实现Vue 3的加载动画。如果你有任何其他问题，请随时提问。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值