jquery - CSS transition display: block -
i looked @ other subject , did same : add padding, height, opacity.
but have no transition css above. can tell me why ?
when touch button adds class .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: .3s ease .15s; -moz-transition: .3s ease .15s; -o-transition: .3s ease .15s; -ms-transition: .3s ease .15s; transition: .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; }
you cannot transition elements if toggling display
between block
, none
. try changing rules visibility: hidden
, visibility: visible
.
Comments
Post a Comment