htmlでボックストランジションをスムーズにする方法は？

Question

私はこれに関するいくつかの情報を見つけようとしてきましたが、良い情報を見つけることはできません。
"Contact Us"と言うdivを作成したいと思います。divをクリックすると、レイヤーが入力タイプでスムーズに表示されます。

私は表示から変更するいくつかの簡単なjavascriptを作ることができることを知っています：表示しない：ブロック、どのように滑らかにすることができますか？例えば

<div id="contact-us" onClick="showContactUs()"> 
<div id="contact-us-content" style="display: block;"> 
    Name - <input type="text" name="name"> 
    Email- <input type="text" name="email"> 
</div> 
</div> 

を（ちょうど簡単な例、実際のものが良いでしょう）そして、あなたのいずれかが任意のヒント、またはリンクIを持っている場合は、Javascriptを

function showContactUs(){ 
    var r = document.getElementById("contact-us-content"); 
    r.style.display = "block"; 
} 

です私はそれを感謝することを確認することができます。 jqueryでうまくいくわけではありませんが、その方が良いと思うなら絶対に試してみてください。

Answer 1

display: blockを設定すると、スムーズに見えるようにする方法はありません。ただし、不透明度に移行することはできます。私はjavascriptでクラスを追加し、残りをcssで解決することをお勧めします。

ここでそれをチェックアウト：https://jsfiddle.net/3wLrfk3d/

$(document).on('click', '#contact-us', show_contact_form) 

function show_contact_form() { 
    $('#contact-us-content').addClass('shown') 
} 

CSS：

#contact-us-content { 
    opacity: 0; 
    transition: opacity .5s ease; 

    &.shown { 
     opacity: 1; 
    } 
} 

私の例では、jQueryとSASSを使用していますが、私はあなたがバニラとCSSにそれを書き換えることができるようになります確信しています。

Answer 2

私は通常、不透明度を遷移させますが、それは表示されていても領域が占有され、マウスイベントをブロックしていても要素がそこに存在することを意味します。私は、それがフェードアウト完了だとき、それを完全に非表示にする要素と1をフェードするために、2つのクラス、1つを有することにより、この問題を解決：

$(function() { 
 
\t var $box = $('.box'); 
 
\t $('.toggle').on('click', function() { 
 
\t \t if (!($box).hasClass('visible')) { 
 
    \t $box.addClass('transitioning'); 
 
\t \t \t setTimeout(function() { 
 
\t  $box.addClass('visible'); 
 
     }, 1) 
 
    } else { 
 
    \t $box.removeClass('visible'); 
 
     setTimeout(function() { 
 
\t  \t $box.removeClass('transitioning'); 
 
     }, 400) 
 
    } 
 
    }) 
 
})

body { 
 
    font-family: Helvetica, Arial, sans-serif; 
 
} 
 

 
.box { 
 
    background-color: #333; 
 
    color: white; 
 
    border: 5px solid white; 
 
    padding: 50px 10px; 
 
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, .4); 
 
    text-align: center; 
 
    transition: opacity .4s ease-in-out; 
 
    display: none; 
 
    opacity: 0; 
 
} 
 

 
.transitioning { 
 
    display: block; 
 
} 
 

 
.visible { 
 
    opacity: 1; 
 
} 
 

 
.toggle { 
 
    margin-bottom: 20px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button class="toggle">Toggle Box</button> 
 
<div class="box"> 
 
    <h1>Hi there</h1> 
 
</div>

注：これは迅速かつ汚い一例であり、それはちょっとあなたがトグルボタンをクリックして迷惑メールを鳴らすならば、私はそれをあなたに任せます。