发现fadeOut()之后有个问题,就是白色背景先消失,然后css3小动画才消失,这样就会显得不太友好,请问大家是怎么解决的
<!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>
我有检查过逻辑,并没有发现问题,再看看老师的视频好了。
你的html结构里可能有问题吧,而且,你还需要检查你的css样式