Transiciones en la pantalla: propiedad

Actualmente estoy diseñando una especie de menú 'mega desplegable' de CSS, básicamente un menú desplegable normal solo de CSS, pero que contiene diferentes tipos de contenido.

Por el momento, parece que las transiciones CSS3 no se aplican a la propiedad 'display' , es decir, no se puede hacer ningún tipo de transición de display: none a display: block (o cualquier combinación).

¿Alguien puede pensar en una manera para que el menú de segundo nivel del ejemplo anterior 'se desvanezca' cuando alguien se cierne sobre uno de los niveles superiores ¿elementos del menú?

Soy consciente de que puedes usar transiciones en la propiedad visibility:, pero no se me ocurre una manera de utilizarlas de manera efectiva.

También he intentado usar altura, pero eso simplemente falló miserablemente.

También soy consciente de que es trivial lograr esto usando JavaScript, pero quería desafiarme a mí mismo a usar solo CSS y creo que me estoy quedando un poco corto.

Todas y cualquier sugerencia son bienvenidas.

Author: Brian Burns, 0000-00-00
Source

3 answers

Puede concatenar dos transiciones o más, y visibility es lo que viene bien esta vez.

div {
  border: 1px solid #eee;
}
div > ul {
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s, opacity 0.5s linear;
}
div:hover > ul {
  visibility: visible;
  opacity: 1;
}
<div>
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
  </ul>
</div>

(No olvide los prefijos de proveedor a la propiedad transition)

Más detalles están en este artículo

 1058
Author: Guillermo,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-08-23 20:04:35

Necesita ocultar el elemento por otros medios para que esto funcione.

Logré el efecto colocando ambos <div> s absolutamente y estableciendo el oculto a opacity: 0.

Si incluso alterna la propiedad display de none a block, Su transición en otros elementos no se producirá.

Para evitar esto, siempre permita que el elemento sea display: block, pero oculte el elemento ajustando cualquiera de estos medios:

  1. Establecer el height a 0.
  2. Establezca opacity en 0.
  3. Coloque el elemento fuera del marco de otro elemento que tiene overflow: hidden.

Es probable que haya más soluciones, pero no puede realizar una transición si cambia el elemento a display: none. Por ejemplo, puede intentar algo como esto:

div {
    display: none;
    transition: opacity 1s ease-out;
    opacity: 0; 
}
div.active {
    opacity: 1;
    display: block;
}

Pero eso no funcionará. Por mi experiencia, he encontrado que esto no hace nada.

Debido a esto, siempre tendrá que mantener el elemento display: block - pero podrías evitarlo haciendo algo como esto: {[16]]} 

div {
    transition: opacity 1s ease-out;
    opacity: 0; 
    height: 0;
    overflow: hidden;
}
div.active {
    opacity: 1;
    height: auto;
}
 678
Author: Jim Jeffers,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-06-26 09:57:55

En el momento de esta publicación, todos los principales navegadores deshabilitan las transiciones CSS si intenta cambiar la propiedad display, pero las animaciones CSS aún funcionan bien, por lo que podemos usarlas como una solución.

Código de ejemplo: - (Puede aplicarlo a su menú en consecuencia) Demo

Agregue el siguiente CSS a su hoja de estilos: - 

@-webkit-keyframes fadeIn {
    from { opacity: 0; }
      to { opacity: 1; }
}  
@keyframes fadeIn {
    from { opacity: 0; }
      to { opacity: 1; }
}

A continuación, aplicar la animación fadeIn al niño en el hover padre: - (y por supuesto establecer display: block) 

.parent:hover .child {
    display: block;
    -webkit-animation: fadeIn 1s;
    animation: fadeIn 1s;
}
 208
Author: dippas,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-05-10 14:54:30