CSSトランジション表示：ブロック

Question

他の被写体を見て、同じようにしました。パディング、高さ、不透明度を追加します。

しかし、私は上記のCSSに移行していません。なぜか教えてくれますか ？

私はそれが私のdiv contactEmoteにクラス.SHOWを追加し、ボタンに触れる：

#contactEmote{ 
    display: none; 
    top: 0px; 
    background-color: #f65b61; 
    width: 100%; 
    z-index: 2000; 

    opacity:0; 
    clear: both; 
    height: 0px; 
    padding: 0 8px; 
    overflow: hidden; 

    -webkit-transition: all .3s ease .15s; 
    -moz-transition: all .3s ease .15s; 
    -o-transition: all .3s ease .15s; 
    -ms-transition: all .3s ease .15s; 
    transition: all .3s ease .15s; 


    -webkit-box-shadow: 0px 4px 35px -1px rgba(0,0,0,0.68); 
    -moz-box-shadow: 0px 4px 35px -1px rgba(0,0,0,0.68); 
    box-shadow: 0px 4px 35px -1px rgba(0,0,0,0.68); 
} 

#contactEmote.show{ 
    top: 0px; 
    display: block; 
    height: 100px; 
    opacity: 1; 
    padding: 8px; 
} 

Answer 1

あなたはblockとnone間displayをトグルしている場合は、要素を移行することはできませんが。これらのルールをvisibility: hiddenとvisibility: visibleに変更してみてください。