编程 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 得到当前页面高度和宽度的两个函数

Feb 21 Javascript

JQuery autocomplete 使用手册

Apr 01 Javascript

后台获取ZTREE选中节点的方法

Feb 12 Javascript

全面解析Bootstrap表单使用方法（表单按钮）

Nov 24 Javascript

WordPress中利用AJAX技术进行评论提交的实现示例

Jan 12 Javascript

javascript实现鼠标点击页面移动DIV

Dec 02 Javascript

js实现动态显示时间效果

Mar 06 Javascript

layui文件上传实现代码

May 20 Javascript

详解基于vue-cli3.0如何构建功能完善的前端架子

Oct 09 Javascript

JS匿名函数内部this指向问题详析

May 10 Javascript

Vue中this.$nextTick的作用及用法

Feb 04 Javascript

详解ES6数组方法find()、findIndex()的总结

May 12 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