更改类动画在jQuery / CSS中无法正常工作

Question

我正在尝试制作一个预加载器，该预加载器应使用加载栏填充屏幕，然后向上移动以为页面内容向上移动并填充页面留出空间。

问题是我的动画只能工作一次。因此，我可以使加载程序和内容向上滑动，但之后不能再次向下滑动。我已经反向尝试过，问题仍然存在。

“可移动”是包含内容的div。预先感谢您的帮助！

JS

var progress = setInterval(function () {
        var $bar = $("#bar");

        if ($bar.width() >= 50) {
            clearInterval(progress);
        } else {
            $bar.width($bar.width() + 5);
        }
    }, 800);

    var moveable = $(".moveable");
    var loader = $(".loader");

    $(window).on('load', function () {

        let stateObj = {foo: "bar"};
        addressloc = "{{ url_for('index') }}";
        $("#dynamic-body").load(addressloc);
        // window.history.pushState(stateObj, "Next", addressloc);

        $("#bar").animate({
            width: 50,
            duration: 100
        });

        $(document).ajaxStop(function () {

            loader.delay(0).queue(function(){
                loader.removeClass("swipedown").addClass("swipeup");
            });
            moveable.delay(0).queue(function(){
                moveable.removeClass("swipedown").addClass("swipeup");
            });

            loader.removeAttr("style").removeClass("swipeup");
            moveable.removeAttr("style").removeClass("swipeup");
        });
    });

    $(document).on("click", 'a.transition', function(event) {

        event.preventDefault(); // Stop hyperlink
        addressloc = $(this).attr('href'); // Get hyperlink location

        $('html,body').animate({scrollTop:0},300); // Scroll to top

        $(".moveable").delay(0).queue(function(){
            $(this).removeClass("swipeup").addClass("swipedown");
        });
        $(".loader").delay(0).queue(function(){
            $(this).removeClass("swipeup").addClass("swipedown");
        });

    });

CSS

  .loader {
    background-color: #852dc9;
    position: fixed;
    left: 0;
    top: -100vh;
    width: 100%;
    height: 100%;
    z-index: 99;
  }

.loader.swipeup {
  -webkit-animation:ld_swipe_up 1s;
  -moz-animation:ld_swipe_up 1s;
  -ms-animation:ld_swipe_up 1s;
  -o-animation:ld_swipe_up 1s;
  animation:ld_swipe_up 1s;
}

@-webkit-keyframes ld_swipe_up {
  0% { top: 0}
  100% {top: -100vh}
}

@-moz-keyframes ld_swipe_up {
  0% { top: 0}
  100% {top: -100vh}
}
@-ms-keyframes ld_swipe_up {
  0% { top: 0}
  100% {top: -100vh}
}
@-o-keyframes ld_swipe_up {
  0% { top: 0}
  100% {top: -100vh}
}
@keyframes ld_swipe_up {
  0% { top: 0}
  100% {top: -100vh}
}

.loader.swipedown {
  -webkit-animation:ld_swipe_down 1s;
  -moz-animation:ld_swipe_down 1s;
  -ms-animation:ld_swipe_down 1s;
  -o-animation:ld_swipe_down 1s;
  animation:ld_swipe_down 1s;
}

@-webkit-keyframes ld_swipe_down {
  0% { top: -100vh}
  100% {top: 0}
}

@-moz-keyframes ld_swipe_down {
  0% { top: -100vh}
  100% {top: 0}
}
@-ms-keyframes ld_swipe_down {
  0% { top: -100vh}
  100% {top: 0}
}
@-o-keyframes ld_swipe_down {
  0% { top: -100vh}
  100% {top: 0}
}
@keyframes ld_swipe_down {
  0% { top: -100vh}
  100% {top: 0}
}

.moveable {
  position: relative;
  bottom: auto;
  top: auto;
}

.moveable.swipedown {
  -webkit-animation:swipe_down 1s;
  -moz-animation:swipe_down 1s;
  -ms-animation:swipe_down 1s;
  -o-animation:swipe_down 1s;
  animation:swipe_down 1s;
}

@-webkit-keyframes swipe_down {
  0% { bottom: 0}
  100% {bottom: -100vh}
}

@-moz-keyframes swipe_down {
  0% { bottom: 0}
  100% {bottom: -100vh}
}
@-ms-keyframes swipe_down {
  0% { bottom: 0}
  100% {bottom: -100vh}
}
@-o-keyframes swipe_down {
  0% { bottom: 0}
  100% {bottom: -100vh}
}
@keyframes swipe_down {
  0% { bottom: 0}
  100% {bottom: -100vh}
}

.moveable.swipeup {
  -webkit-animation:swipe_up 1s;
  -moz-animation:swipe_up 1s;
  -ms-animation:swipe_up 1s;
  -o-animation:swipe_up 1s;
  animation:swipe_up 1s;
}

@-webkit-keyframes swipe_up {
  0% { bottom: -100vh}
  100% {bottom: 0}
}

@-moz-keyframes swipe_up {
  0% { bottom: -100vh}
  100% {bottom: 0}
}
@-ms-keyframes swipe_up {
  0% { bottom: -100vh}
  100% {bottom: 0}
}
@-o-keyframes swipe_up {
  0% { bottom: -100vh}
  100% {bottom: 0}
}
@keyframes swipe_up {
  0% { bottom: -100vh}
  100% {bottom: 0}
}