在 CSS 动画完成后删除 class - jQuery

Question

我的网站上有一个预加载器，它的屏幕会下降，然后当页面加载时，屏幕会恢复。

这在我的一些网站页面上有效，但在加载速度非常快的页面上，屏幕关闭但似乎没有恢复...

有谁知道为什么会这样以及如何解决它？

如有任何帮助，我们将不胜感激。我的代码如下。

jQuery(document).ready(function() {

$('.prepage').addClass("animation");
  $('.prepage').one("webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend",
              function(event) {
    $(window).on('load', function() {
        $('.prepage').removeClass("animation");
        $('.prepage').addClass("done");
      });
  });
});

.prepage {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: pink;
    top: -100%;
    left: 0;
    z-index: 999999999;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: 1s ease-out;
}

.animation {
    top: 0;
}

.done {
    top: -100% !important;
    transition: 1s ease-out;
}

.loader-inside {
    display: inline-block;
    color: white;
    font-weight: bold;
    letter-spacing: 2px;
    font-size: 30px;
    position: relative;
}

.existing {
    opacity: 0.4;
}

.headtype {
    position: absolute;
    top: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="prepage"><div class="loader-inside"><p class="existing">LOADING...</p></div></div>

Answer 1

使用SetTimeout

在此示例中，代码将等待 1 秒（1000 毫秒）

jQuery(document).ready(function() {

$('.prepage').addClass("animation");
  $('.prepage').one("webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend",
              function(event) {
    $(window).on('load', function() {
        $('.prepage').removeClass("animation");
        setTimeout(function() {
           $('.prepage').addClass("done");
        }, 1000)
      });
  });
});

Answer 2

您可以使用 queue() 将 class 删除操作排队，这将在加载时增加延迟，例如此处将等待 1 秒再返回

jQuery(document).ready(function() {

$('.prepage').addClass("animation");
  $('.prepage').one("webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend",
                function() {
        $(this).delay(1000).queue(function() {  // Wait for 1 second.
          $(this).removeClass("animation").dequeue();
         $(this).addClass("done");
        });
    });
});

.prepage {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: pink;
    top: -100%;
    left: 0;
    z-index: 999999999;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: 1s ease-out;
}

.animation {
    top: 0;
}

.done {
    top: -100% !important;
    transition: 1s ease-out;
}

.loader-inside {
    display: inline-block;
    color: white;
    font-weight: bold;
    letter-spacing: 2px;
    font-size: 30px;
    position: relative;
}

.existing {
    opacity: 0.4;
}

.headtype {
    position: absolute;
    top: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="prepage"><div class="loader-inside"><p class="existing">LOADING...</p></div></div>

Answer 3

感谢这些家伙。我尝试了延迟，但它没有用，因为它没有一直覆盖下面页面上的内容。

最后我就这样修好了...

它不适用于此处的示例，但在实时站点上，它可以！

感谢所有的帮助和建议:)

$(window).bind('beforeunload', function(){
    $('.prepage').css('top', '0');
});

$(window).bind('load', function(){
    $('.prepage').css('top', '-100vh');
});

.prepage {
    position: absolute;
    width: 100vw;
    height: 100vh;
    background-color: $pink;
    top: 0;
    left: 0;
    z-index: 999999999;
    transition: 1s;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="prepage"><div class="loader-inside"><p class="existing">HOLD TIGHT...</p></span></div></div>

在 CSS 动画完成后删除 class - jQuery

Removing a class after a CSS animation has finished - jQuery

html

javascript

css

jquery

preloader