编程 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 相关文章推荐

初窥JQuery(二)事件机制(2)

Dec 06 Javascript

用JQuery模仿淘宝的图片放大镜显示效果

Sep 15 Javascript

非常有用的40款jQuery 插件推荐（系列二）

Dec 25 Javascript

Javascript基础教程之数组 array

Jan 18 Javascript

jQuery+easyui中的combobox实现下拉框特效

Feb 27 Javascript

jQuery on()方法示例及jquery on()方法的优点

Aug 27 Javascript

js和jQuery设置Opacity半透明兼容IE6

May 24 Javascript

关于Vue.js一些问题和思考学习笔记（2）

Dec 02 Javascript

JavaScript选择排序算法原理与实现方法示例

Aug 06 Javascript

javascript闭包的使用之按钮切换功能

Aug 30 Javascript

微信小程序修改checkbox的样式代码实例

Jan 21 Javascript

js实现无缝轮播图特效

May 09 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之规范编程命名小结

2013/05/15 PHP

php mail to 配置详解

2014/01/16 PHP

PHP实现的oracle分页函数实例

2016/01/25 PHP

PHP二维数组排序简单实现方法

2016/02/14 PHP

LNMP部署laravel以及xhprof安装使用教程

2017/09/14 PHP

基于swoole实现多人聊天室

2018/06/14 PHP

二行代码解决全部网页木马

2008/03/28 Javascript

nodejs npm install全局安装和本地安装的区别

2014/06/05 NodeJs

使用JS实现jQuery的addClass, removeClass, hasClass函数功能

2014/10/31 Javascript

jQuery基于ID调用指定iframe页面内的方法

2016/07/06 Javascript

浅谈jquery中使用canvas的问题

2016/10/10 Javascript

IE8利用自带的setCapture和releaseCapture解决iframe的拖拽事件方法

2016/10/25 Javascript

jQuery实现的事件绑定功能基本示例

2017/10/11 jQuery

Angular数据绑定机制原理

2018/04/17 Javascript

JS实现吸顶特效

2020/01/08 Javascript

如何利用JS将手机号中间四位变成*号

2020/09/29 Javascript

JavaScript TAB栏切换效果的示例

2020/11/05 Javascript

举例详解Python中yield生成器的用法

2015/08/05 Python

Python实现二叉堆

2016/02/03 Python

Python实现螺旋矩阵的填充算法示例

2017/12/28 Python

Python函数定义及传参方式详解(4种)

2019/03/18 Python

在win10和linux上分别安装Python虚拟环境的方法步骤

2019/05/09 Python

Python安装依赖(包)模块方法详解

2020/02/14 Python

Python Opencv中用compareHist函数进行直方图比较对比图片

2020/04/07 Python

将pymysql获取到的数据类型是tuple转化为pandas方式

2020/05/15 Python

Python填充任意颜色,不同算法时间差异分析说明

2020/05/16 Python

15款Python编辑器的优缺点,别再问我“选什么编辑器”啦

2020/10/19 Python

用python对excel查重

2020/12/07 Python

物业管理大学生个人的自我评价

2013/10/10 职场文书

技术总监的工作职责

2013/11/13 职场文书

护士节活动总结

2014/08/29 职场文书

党员干部观看《周恩来四个昼夜》思想汇报

2014/09/10 职场文书

2015年小学师德师风建设工作总结

2015/10/23 职场文书

python获取对象信息的实例详解

2021/07/07 Python

引用计数法和root搜索算法以及JVM中判定对象需要回收的方法

2022/04/19 Java/Android

css清除浮动clearfix:after的用法详解（附完整代码）

2023/05/21 HTML / CSS