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

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 职场文书