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

利用js实现在浏览器状态栏显示访问者在本页停留的时间

Dec 29 Javascript

每天一篇javascript学习小结（Date对象）

Nov 13 Javascript

Jquery 1.9.1源码分析系列（十二）之筛选操作

Dec 02 Javascript

基于BootStrap Metronic开发框架经验小结【二】列表分页处理和插件JSTree的使用

May 12 Javascript

JavaScript实现256色转灰度图

Feb 22 Javascript

canvas压缩图片转换成base64格式输出文件流

Mar 09 Javascript

vuejs响应用户事件（如点击事件）

Mar 14 Javascript

js实现图片粘贴上传到服务器并展示的实例

Nov 08 Javascript

浅谈Koa2框架利用CORS完成跨域ajax请求

Mar 06 Javascript

对layui数据表格动态cols(字段)动态变化详解

Oct 25 Javascript

在Vue mounted方法中使用data变量详解

Nov 05 Javascript

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

Apr 30 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冒泡算法详解（递归实现）

2014/11/10 PHP

Linux安装配置php环境的方法

2016/01/14 PHP

深入解析PHP中SESSION反序列化机制

2017/03/01 PHP

PHP curl批处理及多请求并发实现方法分析

2018/08/15 PHP

PHP filesize函数用法浅析

2019/02/15 PHP

FormValidate 表单验证功能代码更新并提供下载

2008/08/23 Javascript

jQuery 源码分析笔记(5) jQuery.support

2011/06/19 Javascript

JavaScript面向对象设计二构造函数模式

2011/12/20 Javascript

JS+CSS实现实用的单击输入框弹出选择框的方法

2015/02/28 Javascript

JS实现随机乱撞彩色圆球特效的方法

2015/05/05 Javascript

一起学写js Calender日历控件

2016/04/14 Javascript

jquery通过name属性取值的简单实现方法

2016/06/20 Javascript

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

2016/11/12 Javascript

JSON键值对序列化和反序列化解析

2017/01/24 Javascript

vue-router：嵌套路由的使用方法

2017/02/21 Javascript

基于代数方程库Algebra.js解二元一次方程功能示例

2017/06/09 Javascript

使用vue如何构建一个自动建站项目

2018/02/05 Javascript

[01:51]2014DOTA2国际邀请赛这个赛场没有失败者VGTi5再见

2014/07/23 DOTA

python利用不到一百行代码实现一个小siri

2017/03/02 Python

Python3之文件读写操作的实例讲解

2018/01/23 Python

Python实现Pig Latin小游戏实例代码

2018/02/02 Python

使用django实现一个代码发布系统

2019/07/18 Python

python 最简单的实现适配器设计模式的示例

2020/06/30 Python

python 实现围棋游戏(纯tkinter gui)

2020/11/13 Python

纯CSS3代码实现switch滑动开关按钮效果

2016/08/30 HTML / CSS

Sahajan美国：阿育吠陀护肤品牌

2021/01/09 全球购物

介绍一下Linux中的链接

2016/05/28 面试题

网友共享的几个面试题关于Java和Unix等方面的

2016/09/08 面试题

写得不错的求职信范文

2014/07/11 职场文书

2014年图书管理员工作总结

2014/12/01 职场文书

2014年控辍保学工作总结

2014/12/08 职场文书

环卫处个人工作总结

2015/03/04 职场文书

2016年寒假社会实践活动心得体会

2015/10/09 职场文书

六年级情感作文之500字

2019/10/23 职场文书

Go使用协程交替打印字符

2021/04/29 Golang

React-vscode使用jsx语法的问题及解决方法

2021/06/21 Javascript