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

Div Select挡住的解决办法

Aug 07 Javascript

JavaScript Cookie显示用户上次访问的时间和次数

Dec 08 Javascript

ScrollDown的基本操作示例

Jun 09 Javascript

js实现input框文字动态变换显示效果

Aug 19 Javascript

JS获取input file绝对路径的方法(推荐)

Aug 02 Javascript

使用JS代码实现点击按钮下载文件

Nov 12 Javascript

JavaScript的变量声明提升问题浅析(Hoisting)

Nov 30 Javascript

详解vue-router和vue-cli以及组件之间的传值

Jul 04 Javascript

React操作真实DOM实现动态吸底部的示例

Oct 23 Javascript

vue+axios 前端实现的常用拦截的代码示例

Aug 23 Javascript

Vue发布订阅模式实现过程图解

Apr 30 Javascript

部署vue+Springboot前后端分离项目的步骤实现

May 31 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编程与应用

2006/10/09 PHP

PHP 实用代码收集

2010/01/22 PHP

php.ini-dist 和 php.ini-recommended 的区别介绍(方便开发与安全的朋友)

2012/07/01 PHP

PHP校验15位和18位身份证号的类封装

2018/11/07 PHP

网页中的图片的处理方法与代码

2009/11/26 Javascript

浅析jQuery(function(){})与(function(){})(jQuery)之间的区别

2014/01/09 Javascript

JavaScript获取鼠标移动时的坐标(兼容IE8、chome谷歌、Firefox)

2014/09/13 Javascript

JavaScript常用本地对象小结

2016/03/28 Javascript

AngularJS实现textarea记录只能输入规定数量的字符并显示

2016/04/26 Javascript

jQuery控制文本框只能输入数字和字母及使用方法

2016/05/26 Javascript

使用JavaScript判断手机浏览器是横屏还是竖屏问题

2016/08/02 Javascript

AngularJS实现的省市二级联动功能示例【可对选项实现增删】

2017/10/26 Javascript

利用js将ajax获取到的后台数据动态加载至网页中的方法

2018/08/08 Javascript

微信小程序带动画弹窗组件使用方法详解

2018/11/27 Javascript

jQuery实现的五星点评功能【案例】

2019/02/18 jQuery

JavaScript实现页面中录音功能的方法

2019/06/04 Javascript

用webpack4开发小程序的实现方法

2019/06/04 Javascript

js实现星星打分效果

2020/07/05 Javascript

原生JavaScript写出Tabs标签页的实例代码

2020/07/20 Javascript

深入了解JavaScript词法作用域

2020/07/29 Javascript

JavaScript实现多层颜色选项卡嵌套

2020/09/21 Javascript

python 获取毫秒数,计算调用时长的方法

2019/02/20 Python

Django集成CAS单点登录的方法示例

2019/06/10 Python

Roxy俄罗斯官方网站：冲浪和滑雪板的一切

2020/06/20 全球购物

计算机专业自我鉴定

2013/10/15 职场文书

企业统计员岗位职责

2013/12/13 职场文书

制药工程专业毕业生推荐信

2013/12/24 职场文书

车队司机自我鉴定

2014/03/02 职场文书

市级文明单位申报材料

2014/05/07 职场文书

员工教育培训协议书

2014/09/27 职场文书

缓刑人员思想汇报

2014/10/11 职场文书

党性分析材料格式

2014/12/19 职场文书

目标责任书格式范文

2015/05/11 职场文书

表彰大会新闻稿

2015/07/17 职场文书

2015-2016年小学教导工作总结

2015/07/21 职场文书

JS实现简单控制视频播放倍速的实例代码

2021/04/18 Javascript