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

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

参考网站：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 =true
                return;
            }
            this.markflag=(this.pageNo == this.pages-1)
            this.pageNo++;
            this.loadBlogContent()
        },
         async loadBlogContent() {
            var that = this
            var pageNo = this.pageNo
            var pageSize = this.pageSize
            var cid = this.cid
            that.loading = 1
           
            var res =await axios.get(`/api/blog/load?pageNo=${pageNo}&pageSize=${pageSize}&cid=${cid}&sortnum=${this.sortnum}`);
            
            var blogPage = res.data;
            var {total, pages, records} = blogPage
            that.blogList = that.blogList.concat(records);
            this.total=total
            this.pages = pages
            //等数据加载完毕，改成0
            this.loading=0

        }
 
}