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

不用AJAX和IFRAME,说说真正意义上的ASP+JS无刷新技术

Sep 25 Javascript

jQuery 获取对象定位子对象

May 31 Javascript

定义JavaScript二维数组采用定义数组的数组来实现

Dec 09 Javascript

原生js实现类似弹窗抖动效果

Apr 02 Javascript

jquery实现简单的无缝滚动

Apr 15 Javascript

Jsonp 关键字详解及json和jsonp的区别，ajax和jsonp的区别

Dec 30 Javascript

jQuery取消特定的click事件

Feb 29 Javascript

javascript url几种编码方式详解

Jun 06 Javascript

IntersectionObserver实现图片懒加载的示例

Sep 29 Javascript

利用js实现前后台传送Json的示例代码

Mar 29 Javascript

基于JS实现web端录音与播放功能

Apr 17 Javascript

Node 使用express-http-proxy 做api网关的实现

Oct 15 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