animate.cssとCSS属性を組み合わせる：

Question

こんにちは私はハンバーガーメニューをクリックするとdivをアニメートするスクリプトに少し問題があります。ハンバーガーメニューをもう一度クリックするとdivを閉じるべきです（animation：slideOutUp） 。問題は、.css（ "display"、 "none"）を使用するとあります。何もアニメーション化しません.css（ "display"、 "none"）を使用しないと表示されます：display：block 。あなただけのjQuery slideToggle()機能でビルドを使用することができhttp://codepen.io/anon/pen/bBxVbJ#anon-login

(function() { 
    $('#hamburger-menu').on('click', function() { 
    $('#bar').toggleClass('animate'); 
    if($('#menu-cover').css("display") == "none"){ 
     $('#menu-cover').css("display", "block").removeClass("slideOutUp").addClass("zoomIn"); 
    } 
    else{ 
     $('#menu-cover').removeClass("zoomIn").addClass("slideOutUp").css("display", "none"); 
    }}) 
})(); 

Answer 1

完全なウェブサイトのコード.....

$('#menu-cover').slideToggle();

Updated codepen

でズームとあなたに問題があります現在のCSSはdivのdisplay: noneです。 divは表示されないので、ズームインされません。隠しクラスを最初に追加する必要があります。。しかし、これにより、クローズド・ステート・クラスのアニメーションがページの読み込みに表示されます。だから、私はまた、 "隠し"クラスを追加し、jqueryを介してそれを削除しました。これは、最初のページの読み込みでメニューアニメーションが表示されないように行われますが、アニメーションは後続のクリックで機能します。

また、if/else文ではなく、jqueryのtoggleClass()を使用して2つのクラス間をswtchするだけで、よりクリーンです。

$('#menu-cover').removeClass('hidden').toggleClass('zoomInDown slideOutUp');

Updated codepen

<div id="menu-cover" class="animated slideOutUp hidden"></div> 

(function() { 
    $('#hamburger-menu').on('click', function() { 
    $('#bar').toggleClass('animate'); 
    $('#menu-cover').removeClass('hidden').toggleClass("zoomInDown slideOutUp"); 
    }) 
})();