时间戳

首页 > 解决方案 > 预加载页面 javascript - 平滑淡出

javascript - 预加载页面 javascript - 平滑淡出

问题描述

我已经完成了一些关于预加载页面的 youtube 教程，但我唯一的问题是从预加载页面到主要内容的过渡没有平滑淡出等等......

这是我的索引页

<!DOCTYPE html>
<head>
    <title>Loading animation</title>
    <link rel="stylesheet" href="style.css" />
    <script>
        window.addEventListener("load", function() {
            var leaving = document.getElementById("leaving");
            document.body.removeChild(leaving);
        });
    </script>
</head>
<body>
    <div id="leaving" class="loading">
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>   
    </div>
</body>
</html>

和我的 CSS

html {
    background: #abf971;
    margin: 0;
    padding: 0;
}
.loading {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
    background: rgb(53, 53, 53);
    border: 0px solid #ffffff;
    position: fixed;
    top: 0;
    left: 0;
}
ul {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin: 0;
    padding: 0;
    display: flex;
}
ul li {
    list-style: none;
    width: 40px;
    height: 40px;
    background: #fff;
    border-radius: 50%;
    animation: animate 1.5s ease-in-out infinite;
}
@keyframes animate {
    0%, 20%, 40%, 80%, 100% {
        transform: scale(0.01);
    }
    40% {
        transform: scale(1);
    }
}
ul li:nth-child(1) {
    animation-delay: -1.4s;
    background: #e9c70d;
    box-shadow: 0 0 50px #e9c70d;
}
ul li:nth-child(2) {
    animation-delay: -1.2s;
    background: #e9c70d;
    box-shadow: 0 0 50px #e9c70d;
}
ul li:nth-child(3) {
    animation-delay: -1s;
    background: #e9c70d;
    box-shadow: 0 0 50px #e9c70d;
}
ul li:nth-child(4) {
    animation-delay: -0.8s;
    background: #e9c70d;
    box-shadow: 0 0 50px #e9c70d;
}
ul li:nth-child(5) {
    animation-delay: -0.6s;
    background: #e9c70d;
    box-shadow: 0 0 50px #e9c70d;
}
ul li:nth-child(6) {
    animation-delay: -0.4s;
    background: #e9c70d;
    box-shadow: 0 0 50px #e9c70d;
}
ul li:nth-child(7) {
    animation-delay: -0.2s;
    background: #e9c70d;
    box-shadow: 0 0 50px #e9c70d;
}
ul li:nth-child(8) {
    animation-delay: 0s;
    background: #e9c70d;
    box-shadow: 0 0 50px #e9c70d;
}

所以我的问题是..我要补充什么

<script>
    window.addEventListener("load", function() {
        var leaving = document.getElementById("leaving");
        document.body.removeChild(leaving);
    });
</script>

让它顺利淡出……我有点犹豫要不要花时间，因为如果我的连接太慢以至于超过了时间怎么办……

谢谢

标签： javascriptpreloading

解决方案

使用 jQuery，可以这样做：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> 
</script> 
<script>
window.addEventListener("load", function() {
     //# is used to represent id in jQuery
     //"slow" sets the speed of the animation 
     //jQuery works in nearly all browsers as its developers wrote it for 
     //high performance in all browsers
    $('#leaving').fadeOut("slow", function(){
     //callback function to be performed after the animation is complete
  });
});
</script>

正如 Justinas 所建议的，完整的 jQuery 中的正确语法是这样的：

<script>
$(window).load(function(){
    $('#leaving').fadeOut("slow", function(){
     //do something after animation is complete
  });
});
</script>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(window).load(function(){
    $('#leaving').fadeOut("slow", function(){
     //do something after animation is complete
  });
});
</script>
<div id="leaving" style="border: 1px solid black; width: 100px; height: 50px; position: fixed; z-index: 1000;"></div>

推荐阅读