CSS過渡顯示：塊

Question

我看着其他主題，我也做了同樣的事情：添加填充，高度，不透明度。

但我沒有與上面的CSS轉換。你能告訴我爲什麼嗎 ？

當我輕觸按鈕將其添加類.show我的div contactEmote：

#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。