Css Transición al pasar el ratón sobre el elemento hijo

Question

Im tratando de pausar la visualización de un elemento secundario cuando se coloca el elemento principal sobre él.

HTML:

<span> 
    <div>This Is The Child</div> 
    Some Text in the span 
</span> 

Css:

span { 
    position: relative; 
} 
span div { 
    display: none; 
    width: 0px; 
    opacity: 0; 

    transition: width 5s; 
    -webkit-transition: width 5s; 

    transition: opacity 5s; 
    -webkit-transition: opacity 5s; 
} 
span:hover div { 
    display: inline-block; 
    width: 150px; 
    opacity: 1; 
}​ 

A partir de ahora, cuando se asoma el lapso, el div tiene ningún retraso antes de que se muestra. ¿Cómo voy a arreglarlo para que haya una pausa?

violín aquí: http://jsfiddle.net/SReject/vmvdK/

Unas pocas notas:
que originalmente intentó hacer la transición de la pantalla, pero como Edward señaló, eso no es posible, y han probado el sentido por encima del cual, también, ISN' t trabajo

SOLUCIONÓ

parecería que cualquier propiedad "pantalla" en la "transición a la" estilo se detendrá cualquier animaciones de transición suceda. Para solucionar esto Configuro el ancho del niño para que se muestre a 0px y lo hago de forma completamente transparente. Luego, en la "transición a la" estilo, que establece la anchura correcta, y hacer que el div sólida:

HTML:

<span> 
    <div>This Is The Child</div> 
    Some Text in the span 
</span> 

Css:

span { 
    position: relative; 
} 
span div { 
    position: absolute; 

    width: 0px; 
    opacity: 0; 
    transition: opacity 5s; 
    -webkit-transition: opacity 5s; 
} 
span:hover div { 
    width: 150px; 
    opacity: 1; 
}​ 

violín aquí: http://jsfiddle.net/SReject/vmvdK/

Answer 1

De acuerdo con this article en las transiciones CSS, a las que hace referencia el MDN page on CSS transitions, la propiedad display no es una que puede ser tránsito ioned:

Hay varias propiedades o valores que usted querrá hacer la transición, pero que son a la vez unspecced y sin apoyo en el momento de la escritura:

• background-image, incluyendo gradientes
• ...
• display entre ninguno y cualquier otra cosa

Por lo tanto, aplicar la propiedad transition: display 5s; a su div no tiene ningún efecto.

EDIT:

Sobre la base de su código actualizado, se puede lograr el efecto deseado con la opacidad y la anchura, siempre y cuando no se especifica la propiedad display. Basta con quitar la línea

display: none; 

de la sección span div, y el menú emergente utilizará las transiciones que ha especificado cuando se pasa sobre ella.

Desde la transición display:none;-display:inline-block no puede ser animado, esta propiedad es probablemente cambió sólo al final de la transición - por lo que anima la opacidad mientras que el div sigue siendo invisible.

Answer 2

¿Ha intentado utilizar -webkit-transition-delay: ;? Si no, ¿esto podría ser algo que estás buscando?

hecho un poco de los cambios en el código:

span div { 
position: absolute; 
left: 5px; 
top: 5px; 
border: 1px solid #000; 
background-color: #888; 
width: 0px; 
opacity: 0; 
cursor: pointer; 

}

span:hover div { 
display: inline-block; 
-webkit-transition-delay: 2s; 
width: 150px;    
opacity: 1; 

}

Y aquí es un demo