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

Popular posts from this blog

java - Jasper subreport showing only one entry from the JSON data source when embedded in the Title band -

serialization - Convert Any type in scala to Array[Byte] and back -

SonarQube Plugin for Jenkins does not find SonarQube Scanner executable -