Предварительная загрузка страницы JavaScript - плавное исчезновение - PullRequest
Новая
       28

Предварительная загрузка страницы JavaScript - плавное исчезновение

0 голосов
/ 01 июля 2018

Я сделал некоторые уроки 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>

чтобы он плавно исчезал .... Я не решаюсь уделить ему время, потому что, если соединение с моим настолько медленное, что оно превышает время ...

Спасибо

1 Ответ

0 голосов
/ 01 июля 2018

С помощью 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>

Как предположил Джастинас, правильный синтаксис в полном 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...