问答详情
源自:2-3 css3进度条小动画

加载时背景先消失,动画再消失,这样如何解决

发现fadeOut()之后有个问题,就是白色背景先消失,然后css3小动画才消失,这样就会显得不太友好,请问大家是怎么解决的

提问者:行走的指尖 2017-10-17 09:19

个回答

  • 行走的指尖
    2017-10-19 15:13:21

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>进度条</title>
    <style>
    body{width:100%;height:100%;overflow:hidden;}
    .loading{width:100%;height:100%;background:#fff;position:fixed;top:0;left:0;z-index:100;}
    .pic{width:50px;height:50px;position:absolute;top:0;left:0;right:0;bottom:0;margin:auto;}
    .pic i{display:block;height:50px;float:left;margin:0px 2px;width:6px;background:green;transform:scaleY(0.4);animation:loading 1s infinite;}
    .pic i:nth-child(2){animation-delay: 0.1s}
    .pic i:nth-child(3){animation-delay: 0.2s}
    .pic i:nth-child(4){animation-delay: 0.3s}
    .pic i:nth-child(5){animation-delay: 0.4s}
    @keyframes loading{
    0%,40%,100%{transform:scaleY(0.4);}
    20%{transform:scaleY(1);}
    }
    </style>
    <script src="https://code.jquery.com/jquery-3.2.1.js"></script>
    <script>
    document.onreadystatechange = function(){
    if(document.readyState == "complete"){
    $('.loading').fadeOut(1000);
    }
    }
    </script>
    </head>
    <body>
    <div>
    <div>
    <i></i>
    <i></i>
    <i></i>
    <i></i>
    <i></i>
    </div>
    </div>
    <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1508211101547&di=2901a8f1cc1089987b10ad710c2511a9&imgtype=0&src=http%3A%2F%2Fc.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2F09fa513d269759eea79bc50abbfb43166c22df2c.jpg" alt="">
    <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1508211128910&di=767d7013b5ff88389ed7442c4bf1f315&imgtype=0&src=http%3A%2F%2F10wallpaper.com%2Fwallpaper%2Fmedium%2F1402%2Fdrops_bubbles_grass-Macro_photography_wallpaper_medium.jpg" alt="">
    <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1508211156981&di=22c63385398e039f0e88a1484f1bb1d2&imgtype=0&src=http%3A%2F%2Fb.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2Fdcc451da81cb39dbbf279a97d9160924aa18300f.jpg" alt="">
    <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1508211182137&di=29f2ff39bf658840f9ae93a18258646c&imgtype=0&src=http%3A%2F%2Fd.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2F50da81cb39dbb6fd493c67e70024ab18962b378f.jpg" alt="">
    
    </body>
    </html>

    我有检查过逻辑,并没有发现问题,再看看老师的视频好了。

  • 慕数据7111668
    2017-10-17 18:58:43

    你的html结构里可能有问题吧,而且,你还需要检查你的css样式