Removing a class after a CSS animation has finished - jQuery

Question

I have a preloader on my site that has a screen that comes down and then when the page is loaded, the screen goes back up.

This is working on some of my sites pages but on the pages where it loads really quick, the screen comes down but doesn't seem to come back up...

Does anyone know why this might be and how to fix it?

Any help will be appreciated. My code is below.

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

Thanks for these guys. I tried the delay but it didn't work as it didn't cover the content on the page underneath all the time.

I managed to fix it like this in the end...

It doesn't work on the example on here but on the live site, it does!

Thanks for all the help and advice :)

$(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>