jquery - 我想用 CSS 滑出一个元素然后用 jQuery 隐藏它但是隐藏似乎忽略了动画

Question

我尝试了很多方法来暂停 jQuery，因此它等待 CSS 动画，但它总是立即跳转到 .hide()。请帮忙!

这是我当前的代码:

$('#button').on( "click", function() {
       $( "#main-content" ).toggleClass("hide-main-content").hide();
       $( "#csp-content" ).removeClass("hide-csp-content");
    });

CSS:(请注意，我使用了超夸张的 4.5s，因为我想确认它在 .hide() 开始之前完成。)

.hide-main-content, .hide-csp-content {
    right: -100vw !Important;
    -webkit-transition: all 4.5s ease-in-out;
  -moz-transition: all 4.5s ease-in-out;
  -ms-transition: all 4.5s ease-in-out;
  -o-transition: all 4.5s ease-in-out;
  transition: all 4.5s ease-in-out;
}
#main-content, #csp-content {
  background: #FFFFFF;
  position: relative;
  z-index: 10;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  top: 0;
  right: -40vw;
  width: 60vw;
  -webkit-transition: all 0.5s ease-in-out;
  -moz-transition: all 0.5s ease-in-out;
  -ms-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
}

HTML:

<section id="main-content" class="hide-main-content">
 <p>MAIN</p>
</section>

<section id="csp-content" class="hide-csp-content">
 <p>CSP</p>
</section>

Answer 1

试试这个:

$('#button').on( "click", function() {
       $( "#main-content" ).toggleClass("slide-main-content");
       setTimeout(function() {
           $("#main-content").hide();
           $( "#csp-content" ).removeClass("slide-csp-content");
       }, 4500);
    });

OP 编辑​​:最终这成为了解决方案，感谢您的 setTimeout(function):

$('#button').on( "click", function() {
    $("#main-content").toggleClass("hide-main-content");
        setTimeout(function(){
           $("#main-content").hide();
        }, 500);
    $("#csp-content").toggleClass("hide-csp-content");
        setTimeout(function(){
           $("#csp-content").show();
        }, 500);
});