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

js中将HTMLCollection/NodeList/伪数组转换成数组的代码

Jul 31 Javascript

用jquery中插件dialog实现弹框效果实例代码

Nov 15 Javascript

jQuery中使用animate自定义动画的方法

May 29 Javascript

jquery实现的回旋滚动效果完整实例【附demo源码下载】

Sep 20 Javascript

网络传输协议（http协议）

Nov 18 Javascript

解决拦截器对ajax请求的拦截实例详解

Dec 21 Javascript

Bootstrap禁用响应式布局的实现方法

Mar 09 Javascript

js绑定事件和解绑事件

Apr 27 Javascript

JS回调函数基本定义与用法实例分析

May 24 Javascript

JS数组实现分类统计实例代码

Sep 30 Javascript

Vue请求JSON Server服务器数据的实现方法

Nov 02 Javascript

js实现简易计算器小功能

Nov 18 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

linux下使用crontab实现定时PHP计划任务失败的原因分析

2014/07/05 PHP

PHP中把错误日志保存在系统日志中（Windows系统）

2015/06/23 PHP

php 无限分类树形数据格式化代码

2016/10/11 PHP

js数字输入框(包括最大值最小值限制和四舍五入)

2009/11/24 Javascript

JavaScript中“过于”犀利地for/in循环使用示例

2013/10/22 Javascript

键盘KeyCode值列表汇总

2013/11/26 Javascript

JS判断、校验MAC地址的2个实例

2014/05/05 Javascript

javascript中setTimeout和setInterval的unref()和ref()用法示例

2014/11/26 Javascript

jquery搜索框效果实现方法

2015/01/16 Javascript

JavaScript中各种引用类型的常用操作方法小结

2016/05/05 Javascript

AngularJS 执行流程详细介绍

2016/08/18 Javascript

学习vue.js条件渲染

2016/12/03 Javascript

Vue2.0设置全局样式(less/sass和css)

2017/11/18 Javascript

vue2.5.2使用http请求获取静态json数据的实例代码

2018/02/27 Javascript

JavaScript常用数学函数用法示例

2018/05/14 Javascript

angular实现input输入监听的示例

2018/08/31 Javascript

详解React 的几种条件渲染以及选择

2018/10/23 Javascript

实例讲解JavaScript 计时事件

2020/07/04 Javascript

python爬虫教程之爬取百度贴吧并下载的示例

2014/03/07 Python

Python爬虫设置代理IP的方法(爬虫技巧)

2018/03/04 Python

python中对数据进行各种排序的方法

2019/07/02 Python

Python倒排索引之查找包含某主题或单词的文件

2019/11/13 Python

opencv3/C++ 平面对象识别&透视变换方式

2019/12/11 Python

解决python web项目意外关闭,但占用端口的问题

2019/12/17 Python

python实现多进程按序号批量修改文件名的方法示例

2019/12/30 Python

python_mask_array的用法

2020/02/18 Python

Python 连接 MySQL 的几种方法

2020/09/09 Python

面向游戏玩家和书呆子的极客订阅盒：Loot Crate

2020/11/25 全球购物

师范生自我鉴定

2014/03/20 职场文书

2015年办公室文秘工作总结

2015/04/30 职场文书

欠款纠纷起诉状

2015/05/19 职场文书

培养联系人考察意见

2015/06/01 职场文书

党员转正介绍人意见

2015/06/03 职场文书

写给医护人员的一封感谢信

2019/09/16 职场文书

springboot layui hutool Excel导入的实现

2022/03/31 Java/Android

Java 数组的使用

2022/05/11 Java/Android