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

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