网站内容加载数据时出现延迟友好交互动画的实现步骤

网站内容加载数据时出现延迟友好交互动画的实现步骤

参考网站&＃xff1a;https://www.cnblogs.com/lhb25/p/loading-spinners-animated-with-css3.html

实现步骤1&＃xff1a;新建一个&＃xff1a;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;}
&＃64;-webkit-keyframes bouncedelay{0%,80%,100%{-webkit-transform:scale(0.0)}40%{-webkit-transform:scale(1.0)}
}
&＃64;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;}
&＃64;-webkit-keyframes rotateplane{0%{-webkit-transform:perspective(120px)}50%{-webkit-transform:perspective(120px) rotateY(180deg)}100%{-webkit-transform:perspective(120px) rotateY(180deg) rotateX(180deg)}
}
&＃64;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&＃xff1a;在common/common.js中增加ksdLoading的方法

function ksdLoading(loadingid,mark) {var divdom &＃61; document.getElementById(loadingid);if(mark&＃61;&＃61;1){divdom.innerHTML&＃61;"

实现步骤3&＃xff1a;在你需要的实现loading动画的index页面进行引入css/js即可

index.html核心代码

<div id&＃61;"loading2" v-show&＃61;"loading&＃61;&＃61;1">div><script src&＃61;"/js/commons/common.js">script>
<script>ksdLoading("loading2",1)script>


index.js的核心代码

var vue&＃61;new Vue({el:"#app",data:{loading:1,//0代表隐藏loading 1数据正在加载中 2 代表加载完毕},mounted:function(){// //用ajax异步执行获取博客内容this.loadBlogContent()},methods:{loadMore:function(){if(this.pageNo &＃61;&＃61; this.pages){alert("没有更多了...")this.markflag &＃61;truereturn;}this.markflag&＃61;(this.pageNo &＃61;&＃61; this.pages-1)this.pageNo&＃43;&＃43;;this.loadBlogContent()},async loadBlogContent() {var that &＃61; thisvar pageNo &＃61; this.pageNovar pageSize &＃61; this.pageSizevar cid &＃61; this.cidthat.loading &＃61; 1var res &＃61;await axios.get(&＃96;/api/blog/load?pageNo&＃61;${pageNo}&pageSize&＃61;${pageSize}&cid&＃61;${cid}&sortnum&＃61;${this.sortnum}&＃96;);var blogPage &＃61; res.data;var {total, pages, records} &＃61; blogPagethat.blogList &＃61; that.blogList.concat(records);this.total&＃61;totalthis.pages &＃61; pages//等数据加载完毕&＃xff0c;改成0this.loading&＃61;0}}