Vue - 网站首屏加载等待动画（极简解决方案）_王佳斌_vue等待动画

大大的周 02-07 5264

效果图

前言

解决白屏等待方案非常多，个人而言评判好坏的标准即用最少最简单的代码实现相同的功能。

在 Vue 项目中，网站加载时会显示自定义动画（CSS），当文件加载完毕且页面显示时自动移除动画。

解决方案

😃 思路原理：动画元素放置在 #app 内，Vue 生命周期开始时，自动清除 #app 下所有元素，加载动画也随之消失。

您可以打开控制台，将网速调慢（具体请百度）观察 <div id="app"></div> 节点显示隐藏变化，当页面处于加载状态时，<div id="app"></div> 节点存在，即加载动画执行，当页面加载完毕时，<div id="app"></div> 节点不存在，即加载动画消失。

打开您的项目，找到根目录 public 文件夹下 index.html 文件，

然后，在 <head> ... </head> 标签之间，加入你想要的动画效果（CSS），如下代码所示：

<style>#loading-mask{position:fixed;left:0;top:0;height:100%;width:100%;background:#fff;user-select:none;z-index:9999;overflow:hidden}.loading-wrapper{position:absolute;top:50%;left:50%;transform:translate(-50%,-100%)}.loading-dot{animation:antRotate 1.2s infinite linear;transform:rotate(45deg);position:relative;display:inline-block;font-size:64px;width:64px;height:64px;box-sizing:border-box}.loading-dot i{width:22px;height:22px;position:absolute;display:block;background-color:#1890ff;border-radius:100%;transform:scale(.75);transform-origin:50% 50%;opacity:.3;animation:antSpinMove 1s infinite linear alternate}.loading-dot i:nth-child(1){top:0;left:0}.loading-dot i:nth-child(2){top:0;right:0;-webkit-animation-delay:.4s;animation-delay:.4s}.loading-dot i:nth-child(3){right:0;bottom:0;-webkit-animation-delay:.8s;animation-delay:.8s}.loading-dot i:nth-child(4){bottom:0;left:0;-webkit-animation-delay:1.2s;animation-delay:1.2s}@keyframes antRotate{to{-webkit-transform:rotate(405deg);transform:rotate(405deg)}}@-webkit-keyframes antRotate{to{-webkit-transform:rotate(405deg);transform:rotate(405deg)}}@keyframes antSpinMove{to{opacity:1}}@-webkit-keyframes antSpinMove{to{opacity:1}}</style>

最后，在 <div id="app"> ... </div> 节点下，加入与动画匹配的元素（HTML），如下代码所示：

具体代码及位置，可参考如下图片：

写在后面

您可以随意替换动画样式，但注意一定要包裹在 <div id="app"> 节点下，否则无效。