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 相关文章推荐
JavaScript学习笔记之定时器
Jan 22 Javascript
js全选按钮的实现方法
Nov 17 Javascript
Bootstrap的popover(弹出框)2秒后定时消失的实现代码
Feb 27 Javascript
Vuejs仿网易云音乐实现听歌及搜索功能
Mar 30 Javascript
基于vue v-for 循环复选框-默认勾选第一个的实现方法
Mar 03 Javascript
jQuery实现ajax回调函数带入参数的方法示例
Jun 26 jQuery
vue服务端渲染页面缓存和组件缓存的实例详解
Sep 18 Javascript
详解Node.js一行命令上传本地文件到服务器
Apr 22 Javascript
如何获取vue单文件自身源码路径
May 06 Javascript
在vue中使用el-tab-pane v-show/v-if无效的解决
Aug 03 Javascript
Vue Elenent实现表格相同数据列合并
Nov 30 Vue.js
JavaScript继承的三种方法实例
May 12 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
在windows iis5下安装php4.0+mysql之我见
2006/10/09 PHP
PHP多例模式介绍
2013/06/24 PHP
FireFox浏览器使用Javascript上传大文件
2013/10/30 PHP
PHP+iFrame实现页面无需刷新的异步文件上传
2014/09/16 PHP
PHP中round()函数对浮点数进行四舍五入的方法
2014/11/19 PHP
php生成数字字母的验证码图片
2015/07/14 PHP
php结合md5实现的加密解密方法
2016/01/25 PHP
PHP简单实现数字分页功能示例
2016/08/24 PHP
PHP页面输出时js设置input框的选中值
2016/09/30 PHP
经典海量jQuery插件 大家可以收藏一下
2010/02/07 Javascript
一个XML格式数据转换为图表的例子
2010/02/09 Javascript
JS无法捕获滚动条上的mouse up事件的原因猜想
2012/03/21 Javascript
jquery彩色投票进度条简单实例演示
2020/07/23 Javascript
jQuery插件实现文件上传功能(支持拖拽)
2020/08/27 Javascript
jQuery实现遍历复选框的方法示例
2017/03/06 Javascript
js精确的加减乘除实例
2017/11/14 Javascript
three.js利用卷积法如何实现物体描边效果
2019/11/27 Javascript
微信小程序实现电影App导航和轮播
2020/11/30 Javascript
javascript中call,apply,bind的区别详解
2020/12/11 Javascript
python解析xml文件实例分享
2013/12/04 Python
[原创]教女朋友学Python3(二)简单的输入输出及内置函数查看
2017/11/30 Python
基于Python中numpy数组的合并实例讲解
2018/04/04 Python
PyTorch基本数据类型(一)
2019/05/22 Python
浅谈python元素如何去重,去重后如何保持原来元素的顺序不变
2020/02/28 Python
python 安装教程之Pycharm安装及配置字体主题,换行,自动更新
2020/03/13 Python
Python Scrapy框架:通用爬虫之CrawlSpider用法简单示例
2020/04/11 Python
使用SimpleITK读取和保存NIfTI/DICOM文件实例
2020/07/01 Python
Python3如何在服务器打印资产信息
2020/08/27 Python
P D PAOLA法国官网:西班牙著名的珠宝首饰品牌
2020/02/15 全球购物
体育纪念品、亲笔签名的体育收藏品:Steiner Sports
2020/07/31 全球购物
C#的几个面试问题
2016/05/22 面试题
销售助理岗位职责
2014/02/21 职场文书
学校三八妇女节活动情况总结
2014/03/09 职场文书
网站创业计划书
2014/04/30 职场文书
如何书写先进事迹材料?
2019/07/02 职场文书
创业计划书之都市休闲农庄
2019/12/28 职场文书