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

Question

我试了一堆东西来暂停jQuery，所以它等待CSS动画，但它总是立即跳转到。隐藏（）。请帮忙！

这里是我当前的代码：

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

CSS：（注意：我使用的是一个超级exagerated 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（功能）：

$('#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); 
}); 

Answer 2

$("#main-content").toggleClass("slide-main-content"); 
$("#main-content").one("transitionend", function() { 
    $("#main-content").hide(); 
}, false); 

你需要在hding之前检测转换结束。上面添加一个事件监听器给“transitionend”的元素，然后在被触发时隐藏。此代码将替换您的.hide（）行。

Answer 3

也许，那种魔法？

下面的代码将切换2个元素的可见性。默认情况下#main-content可见，并且#csp-content被隐藏。

当单击该按钮，我们切换.hide-main-content类全局 - 在body（可以是元素本身），这将导致#main-content滑出和隐藏（所以它不使用任何空间），并在同时#csp-content是取消隐藏和滑动

如果不为你工作，请描述所需行为 - 什么是你想实现？

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

body { 
 
    overflow-x: hidden; 
 
} 
 

 
#main-content, 
 
#csp-content { 
 
    background: pink; 
 
    text-align: center; 
 
    width: 60vw; 
 
    
 
    overflow: hidden; 
 
    position: relative; 
 
    top: 0; 
 
    
 
    transition: all 1.5s ease-in-out; 
 
} 
 

 
#main-content, 
 
.hide-main-content #csp-content { 
 
    right: -40vw; 
 
    visibility: visible; 
 
    max-height: 10000px; 
 
} 
 

 
#csp-content, 
 
.hide-main-content #main-content { 
 
    right: -100vw; 
 
    visibility: hidden; 
 
    max-height: 0; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

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

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

 
<button id="button" type="button">Toggle content</button>

Answer 4

尝试将一个transitionend事件侦听器添加到元素，然后切换类。

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

.slide-main-content { 
 
    transition: transform 1s; 
 
    transform: translateX(25%); 
 
} 
 
.slide-csp-content { 
 
    color: red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<section id="main-content" class="hide-main-content"> 
 
<p>MAIN</p> 
 
</section> 
 

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

 
<button id="button">button</button>