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 初次进入加载动画实现代码就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JS制作手机端自适应缩放显示
Jun 11 Javascript
举例简介AngularJS的内部语言环境
Jun 17 Javascript
jquery实现仿JqueryUi可拖动的DIV实例
Jul 31 Javascript
JavaScript实现公历转农历功能示例
Feb 13 Javascript
基于AGS JS开发自定义贴图图层
Mar 31 Javascript
微信小程序商城项目之侧栏分类效果(1)
Apr 17 Javascript
微信小程序表单验证错误提示效果
May 19 Javascript
JS实现的JSON数组去重算法示例
Apr 11 Javascript
深入了解javascript 数组的sort方法
Jun 01 Javascript
微信域名检测接口调用演示步骤(含PHP、Python)
Dec 08 Javascript
javascrpt密码强度校验函数详解
Mar 18 Javascript
JS实现简单的九宫格抽奖
Jun 28 Javascript
构建大型 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_MySQL教程-第一天
2007/03/18 PHP
php做下载文件的实现代码及文件名中乱码解决方法
2011/02/03 PHP
PHP中使用curl入门教程
2015/07/02 PHP
PHP在线书签系统分享
2016/01/04 PHP
PHP微信H5支付开发实例
2018/07/25 PHP
[原创]静态页面也可以实现预览 列表不同的显示方式
2006/10/14 Javascript
eval的两组性能测试数据
2012/08/17 Javascript
js判断鼠标左、中、右键哪个被点击的方法
2015/01/27 Javascript
JS日期格式化之javascript Date format
2015/10/01 Javascript
JS获取填报扩展单元格控件的值的解决办法
2017/07/14 Javascript
javascript浏览器用户代理检测脚本实现方法
2017/10/27 Javascript
JS中常用的消息框总结
2018/02/24 Javascript
分享5个顶级的JavaScript Ajax组件库
2018/09/16 Javascript
vue-cli构建vue项目的步骤详解
2019/01/27 Javascript
vue-devtools的安装和使用步骤详解
2019/10/17 Javascript
微信小程序利用for循环解决内容变更问题
2020/03/05 Javascript
python获得linux下所有挂载点(mount points)的方法
2015/04/29 Python
基于numpy中数组元素的切片复制方法
2018/11/15 Python
解决python中无法自动补全代码的问题
2018/12/04 Python
pandas实现DataFrame显示最大行列,不省略显示实例
2019/12/26 Python
TensorFlow加载模型时出错的解决方式
2020/02/06 Python
Python中包的用法及安装
2020/02/11 Python
Python selenium如何打包静态网页并下载
2020/08/12 Python
Python系统公网私网流量监控实现流程
2020/11/23 Python
python音频处理的示例详解
2020/12/23 Python
澳大利亚首屈一指的在线购物目的地:Kogan.com
2017/02/02 全球购物
法学专业应届生求职信
2013/10/16 职场文书
好军嫂事迹材料
2014/01/15 职场文书
优秀工会工作者事迹材料
2014/06/02 职场文书
项目经理任命书内容
2014/06/06 职场文书
党的生日演讲稿
2014/09/10 职场文书
2014年全国爱牙日宣传活动方案
2014/09/21 职场文书
《一面五星红旗》教学反思
2016/02/23 职场文书
2016年党员创先争优公开承诺书
2016/03/25 职场文书
个人工作总结怎么写?
2019/04/09 职场文书
Python+Appium新手教程
2021/04/17 Python