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 相关文章推荐
MooTools 1.2中的Drag.Move来实现拖放
Sep 15 Javascript
javascript 表单验证常见正则
Sep 28 Javascript
学习ExtJS(二) Button常用方法
Oct 07 Javascript
jQuery 一个图片切换的插件
Oct 09 Javascript
js中scrollHeight,scrollWidth,scrollLeft,scrolltop等差别介绍
May 16 Javascript
JS修改css样式style浅谈
May 06 Javascript
JavaScript页面模板库handlebars的简单用法
Mar 02 Javascript
js的flv视频播放器插件使用方法
Jun 23 Javascript
使用JavaScript制作一个简单的计数器的方法
Jul 07 Javascript
原生js实现addclass,removeclass,toggleclasss实例
Nov 24 Javascript
使用JavaScript获取Django模板指定键值数据
May 27 Javascript
vue 组件简介
Jul 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
7个超级实用的PHP代码片段
2011/07/11 PHP
PHP实现上传文件并存进数据库的方法
2015/07/16 PHP
php JWT在web端中的使用方法教程
2018/09/06 PHP
根据分辨率不同,调用不同的css文件
2006/07/07 Javascript
FormValidate 表单验证功能代码更新并提供下载
2008/08/23 Javascript
jQuery语法总结和注意事项小结
2012/11/11 Javascript
Javascript基础教程之数据类型 (数值 Number)
2015/01/18 Javascript
jquery实现倒计时功能
2015/12/28 Javascript
AnjularJS中$scope和$rootScope的区别小结
2016/09/18 Javascript
Vue.js组件tabs实现选项卡切换效果
2016/12/01 Javascript
windows下vue.js开发环境搭建教程
2017/03/20 Javascript
JavaScript之创意时钟项目(实例讲解)
2017/10/23 Javascript
jQuery实现点击DIV同时点击CheckBox,并为DIV上背景色的实例
2017/12/18 jQuery
详解Vue项目引入CreateJS的方法(亲测可用)
2019/05/30 Javascript
TypeScript高级用法的知识点汇总
2019/12/17 Javascript
vue setInterval 定时器失效的解决方式
2020/07/30 Javascript
vue 动态添加的路由页面刷新时失效的原因及解决方案
2021/02/26 Vue.js
Python正则表达式教程之一:基础篇
2017/03/02 Python
python版微信跳一跳游戏辅助
2018/01/11 Python
python读取图片并修改格式与大小的方法
2018/07/24 Python
Django 静态文件配置过程详解
2019/07/23 Python
pytorch 共享参数的示例
2019/08/17 Python
Python散点图与折线图绘制过程解析
2019/11/30 Python
python获取依赖包和安装依赖包教程
2020/02/13 Python
Scrapy+Selenium自动获取cookie爬取网易云音乐个人喜爱歌单
2021/02/01 Python
css3中检验表单的required,focus,valid和invalid样式
2014/02/21 HTML / CSS
简单介绍Object类的功能、常用方法
2013/10/02 面试题
初任培训自我鉴定
2013/10/07 职场文书
金融专业大学生职业生涯规划范文
2014/01/16 职场文书
出纳工作岗位责任制
2014/02/02 职场文书
报关报检委托书
2014/04/08 职场文书
行政专员岗位职责说明书
2014/09/01 职场文书
社区学习党的群众路线教育实践活动心得体会
2014/11/03 职场文书
开展党的群众路线教育实践活动工作总结
2014/11/05 职场文书
2014年客户经理工作总结
2014/11/20 职场文书
优秀班主任先进事迹材料
2014/12/16 职场文书