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

关于jquery性能最佳实践的讨论,与求教

Mar 30 Javascript

jquery选择器之内容过滤选择器详解

Jan 27 Javascript

js(JavaScript)实现TAB标签切换效果的简单实例

Feb 26 Javascript

js中的for如何实现foreach中的遍历

May 31 Javascript

jQuery模仿京东/天猫商品左侧分类导航菜单效果

Jun 29 Javascript

Javascript6中字符串的四个新用法分享

Sep 11 Javascript

详解Vue.js之视图和数据的双向绑定(v-model)

Jun 23 Javascript

彻底解决 webpack 打包文件体积过大问题

Jul 07 Javascript

JavaScript 正则命名分组【推荐】

Jun 07 Javascript

微信小程序的注册页面包含倒计时验证码、获取用户信息

May 22 Javascript

js实现旋转的星空效果

Nov 01 Javascript

vuex state中的数组变化监听实例

Nov 06 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获取网站域名和地址的代码

2008/08/17 PHP

php 判断是否是中文/英文/数字示例代码

2013/09/30 PHP

Laravel 5框架学习之Eloquent 关系

2015/04/09 PHP

PHP实现带重试功能的curl连接示例

2016/07/28 PHP

php的laravel框架快速集成微信登录的方法

2016/12/12 PHP

jquery 结合C#后台的数组对文章的关键字自动添加链接的代码

2011/07/15 Javascript

js实现点小图看大图效果的思路及示例代码

2013/10/28 Javascript

js如何设置在iframe框架中指定div不显示

2013/12/04 Javascript

js定时器(执行一次、重复执行)

2014/03/07 Javascript

JavaScript中的replace()方法使用详解

2015/06/06 Javascript

JavaScript通过代码调用Flash显示的方法

2016/02/02 Javascript

NodeJS、NPM安装配置步骤(windows版本) 以及环境变量详解

2017/05/13 NodeJs

解决vue-router中的query动态传参问题

2018/03/20 Javascript

JS html事件冒泡和事件捕获操作示例

2019/05/01 Javascript

Python下的subprocess模块的入门指引

2015/04/16 Python

简单分析Python中用fork()函数生成的子进程

2015/05/04 Python

python顺序的读取文件夹下名称有序的文件方法

2018/07/11 Python

在Python中实现函数重载的示例代码

2019/12/12 Python

Python进程的通信Queue、Pipe实例分析

2020/03/30 Python

如何快速理解python的垃圾回收机制

2020/09/01 Python

德国PC硬件网站：CASEKING

2016/10/20 全球购物

Sofft鞋官网：世界知名鞋类品牌

2017/03/28 全球购物

香港永安旅游网：Wing On Travel

2017/04/10 全球购物

施华洛世奇天猫官方旗舰店：SWAROVSKI

2017/04/17 全球购物

高一家长会邀请函

2014/01/12 职场文书

《蚂蚁和蝈蝈》教学反思

2014/02/24 职场文书

本科毕业生应聘求职信

2014/07/06 职场文书

会计专业求职信

2014/08/10 职场文书

共产党员批评与自我批评

2014/10/15 职场文书

四风问题原因分析及整改措施

2014/10/24 职场文书

人事行政主管岗位职责

2015/04/09 职场文书

采购内勤岗位职责

2015/04/13 职场文书

培训学校2015年度工作总结

2015/07/20 职场文书

高中生物教学反思

2016/02/20 职场文书

导游词之镇江焦山

2019/11/21 职场文书

css弧边选项卡的项目实践

2023/05/07 HTML / CSS