网站内容加载数据时出现延迟友好交互动画的实现步骤
参考网站:https://www.cnblogs.com/lhb25/p/loading-spinners-animated-with-css3.html
实现步骤1:新建一个:css/component.css文件
/*loading*/
.spinner{margin:100px auto;width:20px;height:20px;position:relative;}
.container1 > div,.container2 > div,.container3 > div{width:6px;height:6px;background-color:#f4f4f4;border-radius:100%;position:absolute;-webkit-animation:bouncedelay 1.2s infinite ease-in-out;animation:bouncedelay 1.2s infinite ease-in-out;-webkit-animation-fill-mode:both;animation-fill-mode:both;}
.spinner .spinner-container{position:absolute;width:100%;height:100%;}
.container2{-webkit-transform:rotateZ(45deg);transform:rotateZ(45deg);}
.container3{-webkit-transform:rotateZ(90deg);transform:rotateZ(90deg);}
.circle1{top:0;left:0;}
.circle2{top:0;right:0;}
.circle3{right:0;bottom:0;}
.circle4{left:0;bottom:0;}
.container2 .circle1{-webkit-animation-delay:-1.1s;animation-delay:-1.1s;}
.container3 .circle1{-webkit-animation-delay:-1.0s;animation-delay:-1.0s;}
.container1 .circle2{-webkit-animation-delay:-0.9s;animation-delay:-0.9s;}
.container2 .circle2{-webkit-animation-delay:-0.8s;animation-delay:-0.8s;}
.container3 .circle2{-webkit-animation-delay:-0.7s;animation-delay:-0.7s;}
.container1 .circle3{-webkit-animation-delay:-0.6s;animation-delay:-0.6s;}
.container2 .circle3{-webkit-animation-delay:-0.5s;animation-delay:-0.5s;}
.container3 .circle3{-webkit-animation-delay:-0.4s;animation-delay:-0.4s;}
.container1 .circle4{-webkit-animation-delay:-0.3s;animation-delay:-0.3s;}
.container2 .circle4{-webkit-animation-delay:-0.2s;animation-delay:-0.2s;}
.container3 .circle4{-webkit-animation-delay:-0.1s;animation-delay:-0.1s;}
@-webkit-keyframes bouncedelay{0%,80%,100%{-webkit-transform:scale(0.0)}40%{-webkit-transform:scale(1.0)}
}
@keyframes bouncedelay{0%,80%,100%{transform:scale(0.0);-webkit-transform:scale(0.0);}40%{transform:scale(1.0);-webkit-transform:scale(1.0);}
}
/*方块loading*/
.spinner2{width:60px;height:60px;background-color:#67CF22;margin:100px auto;-webkit-animation:rotateplane 1.2s infinite ease-in-out;animation:rotateplane 1.2s infinite ease-in-out;}
@-webkit-keyframes rotateplane{0%{-webkit-transform:perspective(120px)}50%{-webkit-transform:perspective(120px) rotateY(180deg)}100%{-webkit-transform:perspective(120px) rotateY(180deg) rotateX(180deg)}
}
@keyframes rotateplane{0%{transform:perspective(120px) rotateX(0deg) rotateY(0deg);-webkit-transform:perspective(120px) rotateX(0deg) rotateY(0deg)}50%{transform:perspective(120px) rotateX(-180.1deg) rotateY(0deg);-webkit-transform:perspective(120px) rotateX(-180.1deg) rotateY(0deg)}100%{transform:perspective(120px) rotateX(-180deg) rotateY(-179.9deg);-webkit-transform:perspective(120px) rotateX(-180deg) rotateY(-179.9deg);}
}
实现步骤2:在common/common.js中增加ksdLoading的方法
function ksdLoading(loadingid,mark) {var divdom = document.getElementById(loadingid);if(mark==1){divdom.innerHTML="<div class=\"spinner2\">\n" +" <div class=\"dot1\"></div>\n" +" <div class=\"dot2\"></div>\n" +"</div>";}else{divdom.innerHTML="\n" +" <div class=\"spinner\">\n" +" <div class=\"spinner-container container1\">\n" +" <div class=\"circle1\"></div>\n" +" <div class=\"circle2\"></div>\n" +" <div class=\"circle3\"></div>\n" +" <div class=\"circle4\"></div>\n" +" </div>\n" +" <div class=\"spinner-container container2\">\n" +" <div class=\"circle1\"></div>\n" +" <div class=\"circle2\"></div>\n" +" <div class=\"circle3\"></div>\n" +" <div class=\"circle4\"></div>\n" +" </div>\n" +" <div class=\"spinner-container container3\">\n" +" <div class=\"circle1\"></div>\n" +" <div class=\"circle2\"></div>\n" +" <div class=\"circle3\"></div>\n" +" <div class=\"circle4\"></div>\n" +" </div>\n" +" </div>";}}
实现步骤3:在你需要的实现loading动画的index页面进行引入css/js即可
index.html核心代码
<div id="loading2" v-show="loading==1"></div><script src="/js/commons/common.js"></script>
<script>ksdLoading("loading2",1)</script>
index.js的核心代码
var vue=new Vue({el:"#app",data:{loading:1,//0代表隐藏loading 1数据正在加载中 2 代表加载完毕},mounted:function(){// //用ajax异步执行获取博客内容this.loadBlogContent()},methods:{loadMore:function(){if(this.pageNo == this.pages){alert("没有更多了...")this.markflag =truereturn;}this.markflag=(this.pageNo == this.pages-1)this.pageNo++;this.loadBlogContent()},async loadBlogContent() {var that = thisvar pageNo = this.pageNovar pageSize = this.pageSizevar cid = this.cidthat.loading = 1var res =await axios.get(`/api/blog/load?pageNo=${pageNo}&pageSize=${pageSize}&cid=${cid}&sortnum=${this.sortnum}`);var blogPage = res.data;var {total, pages, records} = blogPagethat.blogList = that.blogList.concat(records);this.total=totalthis.pages = pages//等数据加载完毕,改成0this.loading=0}}