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 初次进入加载动画实现代码就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
输入自动提示搜索提示功能的使用说明:sugggestion.txt
Sep 02 Javascript
js获取和设置属性的方法
Feb 20 Javascript
JavaScript的21条基本知识点
Mar 04 Javascript
js 左右悬浮对联广告代码示例
Dec 12 Javascript
jquery实现Li滚动时滚动条自动添加样式的方法
Aug 10 Javascript
JavaScript实现类似拉勾网的鼠标移入移出效果
Oct 27 Javascript
JS异步文件分片断点上传的实现思路
Dec 25 Javascript
React简单介绍
May 24 Javascript
javascript将json格式数组下载为excel表格的方法
Dec 22 Javascript
深入理解Vue router的部分高级用法
Aug 15 Javascript
工作中常用到的ES6语法
Sep 04 Javascript
用js限制网页只在微信浏览器中打开(或者只能手机端访问)
Dec 24 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在Web开发领域的优势
2006/10/09 PHP
深入理解PHP中的global
2014/08/19 PHP
PHP编写daemon process详解及实例代码
2016/09/30 PHP
浅谈laravel框架与thinkPHP框架的区别
2019/10/23 PHP
js 关键词高亮(根据ID/tag高亮关键字)案例介绍
2013/01/21 Javascript
js跨浏览器实现将字符串转化为xml对象的方法
2013/09/25 Javascript
关于JavaScript对象的动态选择及遍历对象
2014/03/10 Javascript
Javascript学习笔记之 对象篇(一) : 对象的使用和属性
2014/06/24 Javascript
js实现瀑布流的三种方式比较
2020/06/28 Javascript
React Native之TextInput组件解析示例
2017/08/22 Javascript
通过jquery的ajax请求本地的json文件方法
2018/08/08 jQuery
JS中的防抖与节流及作用详解
2019/04/01 Javascript
SSM+layUI 根据登录信息显示不同的页面方法
2019/09/20 Javascript
JavaScript中的相等操作符使用详解
2019/12/21 Javascript
vue 查看dist文件里的结构(多种方式)
2020/01/17 Javascript
vue实现购物车加减
2020/05/30 Javascript
vue3.0生命周期的示例代码
2020/09/24 Javascript
详解Vue数据驱动原理
2020/11/17 Javascript
Python实现将绝对URL替换成相对URL的方法
2015/06/28 Python
python实现csv格式文件转为asc格式文件的方法
2018/03/23 Python
浅谈python的dataframe与series的创建方法
2018/11/12 Python
python 字符串常用函数详解
2019/09/11 Python
浅谈python中统计计数的几种方法和Counter详解
2019/11/07 Python
自学python用什么系统好
2020/06/23 Python
HTML5录音实践总结(Preact)
2020/05/07 HTML / CSS
接口可以包含哪些成员
2012/09/30 面试题
EJB实例的生命周期
2016/10/28 面试题
2014信息公开实施方案
2014/02/22 职场文书
法律六进活动方案
2014/03/13 职场文书
五四青年节优秀演讲稿范文
2014/05/28 职场文书
机关党员公开承诺书
2014/08/30 职场文书
党员学习中共十八大报告思想汇报
2014/09/15 职场文书
失职检讨书大全
2015/01/26 职场文书
音乐教师个人总结
2015/02/06 职场文书
忆童年!用Python实现愤怒的小鸟游戏
2021/06/07 Python
Python进程间的通信之语法学习
2022/04/11 Python