Question

我已经完成了一些有关预加载页面的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>

使其平滑消失... 我有点犹豫，因为如果我的连接太慢以至于超过了时间，该怎么办...

谢谢

Answer 1

使用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>

预加载页面javascript-平滑淡出

1 个答案: