编程 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 css在IE和Firefox中区别分析

Feb 18 Javascript

jquery 新浪网易的评论块制作

Jul 01 Javascript

Javascript表达式中连续的 && 和 || 之赋值区别

Oct 17 Javascript

JavaScript新窗口与子窗口传值详解

Feb 11 Javascript

jQuery获取选中内容及设置元素属性的方法

Jul 09 Javascript

关于编写性能高效的javascript事件的技术

Nov 28 Javascript

JavaScript编程中容易出BUG的几点小知识

Jan 31 Javascript

js实现鼠标点击文本框自动选中内容的方法

Aug 20 Javascript

js变形金刚文字特效代码分享

Aug 20 Javascript

JavaScript中0和""比较引发的问题

May 26 Javascript

Angular 1.x个人使用的经验小结

Jul 19 Javascript

Vue项目history模式下微信分享爬坑总结

Mar 29 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

Terran建筑一览

2020/03/14 星际争霸

PHP初学者常见问题集合修正版(21问答)

2010/03/23 PHP

PHP缓存技术的多种方法小结

2012/08/14 PHP

PHP简单获取多个checkbox值的方法

2016/06/13 PHP

Laravel中使用Queue的最基本操作教程

2017/12/27 PHP

一行代码实现纯数据json对象的深度克隆实现思路

2013/01/09 Javascript

js控制浏览器全屏示例代码

2014/02/20 Javascript

javaScript中slice函数用法实例分析

2015/06/08 Javascript

javascript中传统事件与现代事件

2015/06/23 Javascript

原生js实现返回顶部缓冲效果

2017/01/18 Javascript

NodeJs安装npm包一直失败的解决方法

2017/04/28 NodeJs

随机生成10个不重复的0-100的数字(实例讲解)

2017/08/16 Javascript

js和jQuery以及easyui实现对下拉框的指定赋值方法

2018/01/23 jQuery

webpack4 CSS Tree Shaking的使用

2018/09/03 Javascript

微信小程序功能之全屏滚动效果的实现代码

2018/11/22 Javascript

jQuery+ajax实现批量删除功能完整示例

2019/06/06 jQuery

vue a标签点击实现赋值方式

2020/09/07 Javascript

解决VUE 在IE下出现ReferenceError: Promise未定义的问题

2020/11/07 Javascript

Python编码时应该注意的几个情况

2013/03/04 Python

Python THREADING模块中的JOIN()方法深入理解

2015/02/18 Python

Python实现KNN邻近算法

2021/01/28 Python

python+opencv实现动态物体识别

2018/01/09 Python

Python线程同步的实现代码

2018/10/03 Python

基于python3 的百度图片下载器的实现代码

2019/11/05 Python

Python3标准库glob文件名模式匹配的问题

2020/03/13 Python

Stuart Weitzman欧盟：美国奢华鞋履品牌

2017/05/24 全球购物

建筑装饰学院室内设计专业个人自我评价

2013/12/07 职场文书

小学毕业感言50字

2014/02/16 职场文书

比赛口号大全

2014/06/10 职场文书

安全施工责任书

2014/08/25 职场文书

2014年卫生院工作总结

2014/12/03 职场文书

狮子林导游词

2015/02/03 职场文书

公司清洁工岗位职责

2015/04/15 职场文书

2015年人事科工作总结

2015/04/28 职场文书

[有人@你]你有一封绿色倡议书，请查收！

2019/07/18 职场文书

Vite + React从零开始搭建一个开源组件库

2022/06/25 Javascript