VUE加载动画3步就搞定

这个蛮简单的，蛮写一下
思路：在index.html文件的body中写一个id为Loading的div，然后再created生命周期的时候判断这个div是否存在，存在的话就移除。（建议用css写动画，减少资源占用）

created: function(){document.body.removeChild(document.getElementById('Loading'));},

html内容如下

<!--加载中的动画--><div id="Loading"><div class="loader-inner ball-beat"><div></div><div></div><div></div></div></div>

附小动画样式代码：

<!-- 加载动画样式控制 --><style type="text/css">#Loading {top:50%;left:50%;position: absolute;-webkit-transform: translateY(-50%)  translateX(-50%);transform: translateY(-50%)  translateX(-50%);z-index:100;}@-webkit-keyframes ball-beat {50% {opacity: 0.2;-webkit-transform: scale(0.75);transform: scale(0.75); }100% {opacity: 1;-webkit-transform: scale(1);transform: scale(1); } }@keyframes ball-beat {50% {opacity: 0.2;-webkit-transform: scale(0.75);transform: scale(0.75); }100% {opacity: 1;-webkit-transform: scale(1);transform: scale(1); } }.ball-beat > div {background-color: #5D9BFF;width: 15px;height: 15px;border-radius: 100% !important;margin: 2px;-webkit-animation-fill-mode: both;animation-fill-mode: both;display: inline-block;-webkit-animation: ball-beat 0.7s 0s infinite linear;animation: ball-beat 0.7s 0s infinite linear; }.ball-beat > div:nth-child(2n-1) {-webkit-animation-delay: 0.35s !important;animation-delay: 0.35s !important; }</style>

三步搞定~

VUE加载动画3步就搞定相关推荐

vue加载动画element ui V-loading属性踩坑记录
根据需求,由预览按钮打开弹窗,且弹窗需要渲染的数据较多,渲染的速度比较慢,所以要加一个加载中的效果,element ui的 v-loading属性就正好可以解决这一需求,但是当加入这一属性之后发现,是 ...
7 种最棒的 Vue Loading 加载动画组件测评与推荐 - 穷尽市面上所有加载动画效果（Vue loader）类型
本文完整版:<7 种最棒的 Vue Loading 加载动画组件测评与推荐> 目录 7 种不同类型的 Vue Loading 加载动画组件 1. Vue Simple Spinner - ...
vue ajax加载动画,vue 请求加载数据的时候如何显示加载动画
提醒一下:建议把ajax的请求,拆分成一个独立的sdk,避免多处重复代码. that.loading(false);应该写到ajax执行结束后. var lhcmDetail=new Vue({ el ...
axios vue 加载效果动画_在vue中通过axios异步使用echarts
现实的工作中, 数据不可能是像之前的demo演示的那样把数据写死的. 所有的数据都应该通过发送请求进行获取, 所以, 这篇文章, 我将在Vue项目中使用Echarts: 在Vue中引入Echarts中 ...
【vue开发问题-解决方法】（八）利用axios拦截器实现elementUI中加载动画，控制加载区域
[vue开发问题-解决方法](八)利用axios拦截器实现elementUI中加载动画,控制加载区域参考文章: (1)[vue开发问题-解决方法](八)利用axios拦截器实现elementUI中加 ...
echart 不立即更新解决首次加载动画问题 vue watch immediate
echart 不立即更新解决首次加载动画问题 vue watch immediate watch:{data:{handler(val){this.$nextTick(() =>{this ...
Vue在请求(axios)里面实现loading加载动画
1.在main.js里引入axios import axios from "@/http/index.js" 2.在vuex中设置状态 state: {isLoading: fal ...
vue element-ui Loading加载事件的使用以及自定义Loading加载动画
elemen-ui官方使用 <el-tablev-loading="loading"element-loading-text="拼命加载中"element ...
vue 项目在加载完成之前，显示预置加载动画
vue 项目在加载完成之前,显示预置加载动画自己有一个日记项目,由于服务器带宽很小1MB,在加载之前页面中显示是空白的,就想给它加个前置的动画,这个用户体验更好. 一.实现 1. 定义项目入口如果 ...

VUE加载动画3步就搞定

VUE加载动画3步就搞定相关推荐

最新文章

热门文章