DionysoSong DionysoSong - 1 year ago 331
HTML Question

CSS transition display: block

I looked at other subject and I did the same : add padding, height, opacity.

But I have no transition with the css above. Can you tell me why ?

When I touch a button it adds the class .show to my div contactEmote :

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

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);

top: 0px;
display: block;
height: 100px;
opacity: 1;
padding: 8px;

Answer Source

You cannot transition elements if you are toggling display between block and none. Try changing those rules to visibility: hidden and visibility: visible.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download