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 相关文章推荐
不用AJAX和IFRAME,说说真正意义上的ASP+JS无刷新技术
Sep 25 Javascript
jQuery 获取对象 定位子对象
May 31 Javascript
定义JavaScript二维数组采用定义数组的数组来实现
Dec 09 Javascript
原生js实现类似弹窗抖动效果
Apr 02 Javascript
jquery实现简单的无缝滚动
Apr 15 Javascript
Jsonp 关键字详解及json和jsonp的区别,ajax和jsonp的区别
Dec 30 Javascript
jQuery取消特定的click事件
Feb 29 Javascript
javascript url几种编码方式详解
Jun 06 Javascript
IntersectionObserver实现图片懒加载的示例
Sep 29 Javascript
利用js实现前后台传送Json的示例代码
Mar 29 Javascript
基于JS实现web端录音与播放功能
Apr 17 Javascript
Node 使用express-http-proxy 做api网关的实现
Oct 15 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扩展函数
2006/10/09 PHP
PHP把数字转成人民币大写的函数分享
2014/06/30 PHP
php计划任务之验证是否有多个进程调用同一个job的方法
2015/12/07 PHP
PHP MPDF中文乱码的解决方式
2015/12/08 PHP
php和nginx交互实例讲解
2019/09/24 PHP
详解laravel passport OAuth2.0的4种模式
2019/11/04 PHP
jQuery事件 delegate()使用方法介绍
2012/10/30 Javascript
拖动table标题实现改变td的大小(css+js代码)
2013/04/16 Javascript
JS返回上一页实例代码通过图片和按钮分别实现
2013/08/16 Javascript
javascript删除字符串最后一个字符
2014/01/14 Javascript
对Jquery中的ajax再封装,简化操作示例
2014/02/12 Javascript
jQuery中多个元素的Hover事件解决方案
2014/06/12 Javascript
基于jQuery实现歌词滚动版音乐播放器的代码
2016/09/17 Javascript
js 用于检测类数组对象的函数方法
2017/05/02 Javascript
小程序实现多列选择器
2019/02/15 Javascript
Queue 实现生产者消费者模型(实例讲解)
2017/11/13 Python
在CentOS6上安装Python2.7的解决方法
2018/01/09 Python
windows下python和pip安装教程
2018/05/25 Python
Windows 8.1 64bit下搭建 Scrapy 0.22 环境
2018/11/18 Python
python 二维数组90度旋转的方法
2019/01/28 Python
Python检查 云备份进程是否正常运行代码实例
2019/08/22 Python
python同步两个文件夹下的内容
2019/08/29 Python
python实现自动化报表功能(Oracle/plsql/Excel/多线程)
2019/12/02 Python
简单了解python元组tuple相关原理
2019/12/02 Python
Anaconda 查看、创建、管理和使用python环境的方法
2019/12/03 Python
Python多重继承之菱形继承的实例详解
2020/02/12 Python
python中68个内置函数的总结与介绍
2020/02/24 Python
Python 基于FIR实现Hilbert滤波器求信号包络详解
2020/02/26 Python
详解css3 Transition属性(平滑过渡菜单栏案例)
2017/09/05 HTML / CSS
HTML高亮关键字的实现代码
2018/10/22 HTML / CSS
说说你所熟悉或听说过的j2ee中的几种常用模式?及对设计模式的一些看法
2012/05/24 面试题
C语言中break与continue的区别
2012/07/12 面试题
农行心得体会
2014/09/02 职场文书
生物工程专业求职信
2014/09/03 职场文书
交通事故协议书范本
2016/03/19 职场文书
2016年党员读书月活动总结
2016/04/06 职场文书