CSS-Übergangsanzeige: Block

Question

Ich schaute auf anderes Thema, und ich tat das gleiche: fügen Sie Polsterung, Höhe, Opazität hinzu.

Aber ich habe keinen Übergang mit dem css oben. Kannst du mir sagen warum ?

Wenn ich eine Taste fügt die Klasse .show meiner div contactEmote berühren:

#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

Sie können keine Elemente übergehen, wenn Sie display zwischen block und none Makeln. Versuchen Sie, diese Regeln in visibility: hidden und visibility: visible zu ändern.