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 相关文章推荐
Prototype Selector对象学习
Jul 23 Javascript
JavaScript地图拖动功能SpryMap的简单实现
Jul 17 Javascript
非常漂亮的JS+CSS图片幻灯切换特效
Nov 20 Javascript
用javascript删除当前行,添加行(示例代码)
Nov 25 Javascript
jQuery的$.proxy()应用示例介绍
Apr 03 Javascript
JavaScript Promise启示录
Aug 12 Javascript
Javascript技术栈中的四种依赖注入小结
Feb 27 Javascript
基于Vue实现图书管理功能
Oct 17 Javascript
vue-cli开发环境实现跨域请求的方法
Apr 07 Javascript
JavaScript常用截取字符串的三种方式用法区别实例解析
May 15 Javascript
简述ES6新增关键字let与var的区别
Aug 23 Javascript
深入浅析React中diff算法
May 19 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
人大复印资料处理程序_查询篇
2006/10/09 PHP
php绘图中显示不出图片的原因及解决
2014/03/05 PHP
PHP实践教程之过滤、验证、转义与密码详解
2017/07/24 PHP
JavaScript学习笔记(十七)js 优化
2010/02/04 Javascript
用方法封装javascript的new操作符(一)
2010/12/25 Javascript
js获取多个tagname的节点数组
2013/09/22 Javascript
etmvc+jQuery EasyUI+combobox多值操作实现角色授权实例
2016/11/09 Javascript
详解js中Json的语法与格式
2016/11/22 Javascript
AngularJS中的Promise详细介绍及实例代码
2016/12/13 Javascript
关于JS Lodop打印插件打印Bootstrap样式错乱问题的解决方案
2016/12/23 Javascript
微信小程序 数组(增,删,改,查)等操作实例详解
2017/01/05 Javascript
详解使用JS如何制作简单的ASCII图与单极图
2017/03/31 Javascript
js判断输入框不能为空格或null值的实现方法
2018/03/02 Javascript
js实现自动播放匀速轮播图
2020/02/06 Javascript
基于vue-cli3+typescript的tsx开发模板搭建过程分享
2020/02/28 Javascript
[00:43]TI7不朽珍藏III——幽鬼不朽展示
2017/07/15 DOTA
Python编码类型转换方法详解
2016/07/01 Python
Caffe均值文件mean.binaryproto转mean.npy的方法
2018/07/09 Python
Python3之不使用第三方变量,实现交换两个变量的值
2019/06/26 Python
python模块hashlib(加密服务)知识点讲解
2019/11/25 Python
Python @property原理解析和用法实例
2020/02/11 Python
python mysql 字段与关键字冲突的解决方式
2020/03/02 Python
利用Python计算KS的实例详解
2020/03/03 Python
PyQt5的相对布局管理的实现
2020/08/07 Python
Django中如何用xlwt生成表格的方法步骤
2021/01/31 Python
HTML5的结构和语义(3):语义性的块级元素
2008/10/17 HTML / CSS
ivx平台开发之不用代码实现一个九宫格抽奖功能
2021/01/27 HTML / CSS
团拜会策划方案
2014/06/07 职场文书
民族团结演讲稿范文
2014/08/27 职场文书
博士生专家推荐信
2015/03/25 职场文书
生死牛玉儒观后感
2015/06/11 职场文书
小学数学教师研修感悟
2015/11/18 职场文书
Vue过滤器(filter)实现及应用场景详解
2021/06/15 Vue.js
postgreSQL数据库基础知识介绍
2022/04/12 PostgreSQL
Python爬虫 简单介绍一下Xpath及使用
2022/04/26 Python
Redis基本数据类型Zset有序集合常用操作
2022/06/01 Redis