¿Cómo puedo hacer la transición de altura: 0; a la altura: auto; usando CSS?

Estoy tratando de hacer un <ul> deslice hacia abajo usando transiciones CSS.

Las <ul> comienza en height: 0;. Al pasar el mouse, la altura se establece en height:auto;. Sin embargo, esto hace que simplemente aparezca, no transición,

Si lo hago desde height: 40px; a height: auto;, luego se deslizará hasta height: 0;y, de repente, saltar a la altura correcta.

¿De qué otra manera podría hacer esto sin usar JavaScript?

#child0 {
  height: 0;
  overflow: hidden;
  background-color: #dedede;
  -moz-transition: height 1s ease;
  -webkit-transition: height 1s ease;
  -o-transition: height 1s ease;
  transition: height 1s ease;
}
#parent0:hover #child0 {
  height: auto;
}
#child40 {
  height: 40px;
  overflow: hidden;
  background-color: #dedede;
  -moz-transition: height 1s ease;
  -webkit-transition: height 1s ease;
  -o-transition: height 1s ease;
  transition: height 1s ease;
}
#parent40:hover #child40 {
  height: auto;
}
h1 {
  font-weight: bold;
}
The only difference between the two snippets of CSS is one has height: 0, the other height: 40.
<hr>
<div id="parent0">
  <h1>Hover me (height: 0)</h1>
  <div id="child0">Some content
    <br>Some content
    <br>Some content
    <br>Some content
    <br>Some content
    <br>Some content
    <br>
  </div>
</div>
<hr>
<div id="parent40">
  <h1>Hover me (height: 40)</h1>
  <div id="child40">Some content
    <br>Some content
    <br>Some content
    <br>Some content
    <br>Some content
    <br>Some content
    <br>
  </div>
</div>

preguntado el 17 de agosto de 10 a las 23:08

Creo que el height:auto/max-height La solución solo funcionará si el área de expansión es mayor que la height desea restringir. Si tienes un max-height of 300px, sino un menú desplegable de cuadro combinado, que puede devolver 50px, entonces max-height no te ayudará 50px es variable dependiendo de la cantidad de elementos, puedes llegar a una situación imposible en la que no puedo arreglarlo porque el height no es fijo, height:auto fue la solución, pero no puedo usar transiciones con esto. -

OP está intentando una solución css, no js, ​​de lo contrario, podrían usar overflow y animate -

@VIDesignz: Pero el div interno -100% margin-top recibe el anchura de la envoltura div, no la altura. Entonces, esta solución tiene el mismo tipo de problema, que la solución de altura máxima. Además, cuando el ancho es menor que la altura del contenido, no todo el contenido está oculto por -100% margin-top. Entonces esta es una solución incorrecta. -

Ver github.com/w3c/csswg-drafts/issues/626 para debatir sobre las especificaciones y la implementación de una solución adecuada -

0 Respuestas

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.