Javascript - モーダルアニメーションを逆にする

Question

ビルドしているサイトにいくつかのアイテムがあります。onclickはmodal like thisをアクティブにします。

現在のところ、アニメーションは、モーダルのフォーカスを閉じるかクリックしたときに消えてしまうという一方向性しかありません。私が読んできたことから、人々は1回限りの効果のためにfadeIn/slideInアニメーションを使用しているようですが、アニメーションを逆にして表示をnoneに変更するのではなく、

Answer 1

#modal{bottom: 0; opacity: 1; transition: bottom 400ms, opacity 400ms; } 
#modal.hidden{bottom: -300px; opacity: 0} 

は、次にボタンのクリックイベントに：closeイベントで

$("#modal").addClass("hidden") 

：あなたは純粋なJavaScriptを必要とする場合

$("#modal").removeClass("hidden") 

、それは少しより多くのコードになりますが、基本的にそれは

それです

Answer 2

コードをどのように構造化したかによって、いくつかの方法でこれにアプローチできます。

• animation-direction: reverse; CSSプロパティの使用
• あなたが何か行うことができますjQueryを使ってDOM要素の操作を可能にJavaScriptフレームワークを（jQueryのような）（を使用してください：モーダルを非表示にするモーダルと$('element').slideOut();を表示する$('element').slideIn();を）。
• 使用CSSクラスとJavascriptを/適用を解除するそれらを適用する（オプションは、私がお勧めしたい、と下の例を与えている）：

$(document).ready(function() { 
 
    $('.open').on('click', function(e) { 
 
    e.preventDefault(); 
 

 
    if ($('.modal').hasClass('hide')) { 
 
     $('.modal').removeClass('hide'); 
 
    } 
 
    $('.modal').addClass('show'); 
 
    }); 
 

 
    $('.close').on('click', function(e) { 
 
    e.preventDefault(); 
 

 
    $('.modal').addClass('hide'); 
 

 
    if ($('.modal').hasClass('show')) { 
 
     $('.modal').removeClass('show'); 
 
    } 
 
    }); 
 
});

.modal { 
 
    position: fixed; 
 
    top: 0; 
 
    left: 0; 
 
    width: 300px; 
 
    height: 300px; 
 
    left: -305px; 
 
    z-index: 999; 
 
    transition: all 0.3s ease; 
 
    background: #ffffff; 
 
    border: 1px solid blue; 
 
} 
 
.modal.show { 
 
    left: 150px; 
 
} 
 
.modal.hide { 
 
    left: -305px; 
 
}

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

 
<p>Click <a href="#" class="open">here</a> to open modal</p> 
 

 
<div class="modal"> 
 
    <p>This is a modal window.</p> 
 
    <p>Click <a href="#" class="close">here</a> to close</p> 
 
</div>

この例であることに注意してくださいは、コンセプトの証拠を説明するためだけにあります。あなた自身で整理する必要があります:)