CSSで要素をスライドさせてjQueryで非表示にしたいが、hideはアニメーションを無視するようだ。

Question

jQueryを一時停止するためにたくさんのことを試みたが、CSSアニメーションを待つが、 。隠す（）。助けてください！

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

CSS：：（私はそれが中）（.hide前蹴りを仕上げています確認したいので、私はスーパーが4.5Sをexagerated使用しています。）

.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); 

ますそれを突き止める前にトランジションの終了を検出する必要があります。上記の例では、 "transitionend"の要素に1つのイベントリスナーを追加し、発生時に非表示にします。このコードは、あなたの.hide（）行を置き換えます。

Answer 3

おそらく、その種の魔法？

以下のコードは、2つの要素の表示を切り替えます。既定では#main-contentが表示され、#csp-contentは表示されません。

ボタンがクリックされたとき、私たちはグローバルクラス.hide-main-contentを切り替える - アウトスライドと隠れ#main-contentになりbodyに（それは要素自体もよい）、（それがどんなスペースを使用していない）と、同時に#csp-contentがun-隠れ​​ているとのスライド

それはあなたのために動作しない場合は、希望行動説明してください - 。を達成にあなたが何をしようとしているの？

$('#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イベントリスナーを要素を選択し、クラスを切り替えます。スライド・メイン・コンテンツとスライド-CSP-コンテンツが、HTMLとCSSリファレンス非表示メイン・コンテンツと非表示-CSP-コンテンツと呼ばれる

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