编程 Javascript

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

Posted in Javascript onNovember 14, 2019

在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'));
}

以上这篇Vue SPA 初次进入加载动画实现代码就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持三水点靠木。

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

- Author -

川大宝啊

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

常用一些Javascript判断函数

Aug 14 Javascript

Javascript图像处理—平滑处理实现原理

Dec 28 Javascript

JS获取页面input控件中所有text控件并追加样式属性

Feb 25 Javascript

JQuery实现table行折叠效果以JSON做数据源

May 26 Javascript

JQuery设置时间段下拉选择实例

Dec 30 Javascript

Jquery 垂直多级手风琴菜单附源码下载

Nov 17 Javascript

微信js-sdk地理位置接口用法示例

Oct 12 Javascript

JavaScript制作弹出层效果

Dec 02 Javascript

微信小程序适配iphoneX的实现方法

Sep 18 Javascript

layer.open弹层查看缩略图的原图,自适应大小的实例

Sep 05 Javascript

通过原生vue添加滚动加载更多功能

Nov 21 Javascript

vue 插槽简介及使用示例

Nov 19 Vue.js

构建大型 Vue.js 项目的10条建议(小结)

Nov 14 #Javascript

vue实现修改图片后实时更新

Nov 14 #Javascript

Vue中img的src是动态渲染时不显示的解决

Nov 14 #Javascript

JQuery发送ajax请求时中文乱码问题解决

Nov 14 #jQuery

vue-cli3.X快速创建项目的方法步骤

Nov 14 #Javascript

vue.config.js常用配置详解

Nov 14 #Javascript

解决vue项目中页面调用数据在数据加载完毕之前出现undefined问题

Nov 14 #Javascript

You might like

php中使用__autoload()自动加载未定义类的实现代码

2013/02/06 PHP

php登陆页的密码处理方式分享

2013/10/14 PHP

PHP实现适用于文件内容操作的分页类

2016/06/15 PHP

利用PHP访问MySql数据库的逻辑操作以及增删改查的实例讲解

2017/08/30 PHP

js 实现css风格选择器（压缩后2KB）

2012/01/12 Javascript

Javascript生成json的函数代码(可以用php的json_decode解码)

2012/06/11 Javascript

深入了解JavaScript中的Symbol的使用方法

2015/07/28 Javascript

JS实现仿新浪黄色经典滑动门效果代码

2015/09/27 Javascript

浅析Node.js 中 Stream API 的使用

2015/10/23 Javascript

怎么限制input的text里输入的值只能是数字(正则、js)

2016/05/16 Javascript

JS中闭包的经典用法小结(2则示例)

2016/12/28 Javascript

详解网站中图片日常使用以及优化手法

2017/01/09 Javascript

使用JS判断移动端手机横竖屏状态

2018/07/30 Javascript

vue的for循环使用方法

2019/02/12 Javascript

[39:07]LGD vs VP 2018国际邀请赛淘汰赛BO3 第二场 8.21

2018/08/22 DOTA

Python 获取新浪微博的最新公共微博实例分享

2014/07/03 Python

web.py在SAE中的Session问题解决方法（使用mysql存储）

2015/06/24 Python

Python实现求笛卡尔乘积的方法

2017/09/16 Python

详解Python使用Plotly绘图工具，绘制甘特图

2019/04/02 Python

Python 进程之间共享数据(全局变量)的方法

2019/07/16 Python

Python PyQt5 Pycharm 环境搭建及配置详解（图文教程）

2019/07/16 Python

简单了解django orm中介模型

2019/07/30 Python

python学生管理系统的实现

2020/04/05 Python

Python自带的IDE在哪里

2020/07/01 Python

详解CSS 3 中的 calc() 方法

2018/01/12 HTML / CSS

Html5新标签datalist实现输入框与后台数据库数据的动态匹配

2017/05/18 HTML / CSS

HTML5 Blob 实现文件下载功能的示例代码

2019/11/29 HTML / CSS

英国领先的运动营养品牌：Protein Dynamix

2018/01/02 全球购物

心理健康活动总结

2014/04/30 职场文书

党员个人自我评价

2015/03/03 职场文书

优秀员工自荐书

2015/03/06 职场文书

2015年小学生国庆节演讲稿

2015/07/30 职场文书

“爱眼护眼，提前预防近视”倡议书3篇

2019/10/30 职场文书

详解nodejs内置模块

2021/05/06 NodeJs

PHP实现两种排课方式

2021/06/26 PHP

redis的list数据类型相关命令介绍及使用

2022/01/18 Redis