Desde hace algún tiempo ya intento usar CSS3 para hacer animaciones sencillas en lugar de JavaScript y así aligerar la carga de la web. Pero unos meses atrás me topé con algo curioso cuando intentaba animar el alto de un DIV, algo que estoy seguro que le habrá pasado a más gente.
Lo que trataba de hacer era algo bastante sencillo; usando un evento rollover quería que una capa que contenía una lista pasara de medir 0px a que se ajustara al alto del contenido interior y así, aplicando overflow: hidden conseguir un efecto fluido para mostrar el contenido.
El código era el siguiente:
.capa {
height: 0%;
overflow: hidden;
padding-top: 40px; /*espacio sobre el que hacer hover*/
transition: all 300ms ease-in-out 0s;
}
.capa:hover {
height: 100%;
}
Sin embargo me encontré con que la propiedad height no reconocía los porcentajes y la capa en todo momento se mostraba a su alto normal. Sin embargo si en lugar de usar porcentajes, ponía un alto fijo en píxeles, funcionaba correctamente.
De manera provisional me serví de esta solución, pero claro, no era lo más idóneo si la intención es que el contenido de dentro sea dinámico y por tanto el alto tienda a variar.
Al parecer no es que sea un error, es simplemente que esta funcionalidad para el parámetro no está implementada. Aunque no estoy muy familiarizado con el proceso interno de CSS para este caso, imagino que es porque se deben hacer demasiadas operaciones para calcular el alto y consumiría gran cantidad de recursos.
En cualquier caso se me ocurrió que si los porcentajes para la propiedad height no eran viables, quizá max-height pudiera dejarme con una solución mejor que fijar el alto en píxeles. Por defecto una capa se ajusta al alto del contenido y las propiedades anteriores lo que hacen es establecer un límite de tamaño que puede adoptar la misma. De este modo si establecemos que el max-height del DIV en estado de reposo será 0px y en hover 500px, por ejemplo, la capa crecerá con su animación y se ajustará al tamaño del contenido siempre que éste no rebase el límite que hemos puesto.
.capa {
max-height: 0px;
overflow: hidden;
padding-top: 40px; /*espacio sobre el que hacer hover*/
transition: all 300ms ease-in-out 0s;
}
.capa:hover {
max-height: 500px;
}Esta solución no resuelve el problema al cien por cien, pero sí que nos da más margen que la opción de fijarle a height directamente un alto en píxeles. Dependiendo del contenido que vayamos a cargar podemos hacer un estimado sobre alto máximo que podría llegar a ocupar.
Si tienes otra posible solución a este tema o puedes arrojar un poco más de luz sobre este tema no dudes en comentarlo, será muy enriquecedor para la comunidad.
Deja una respuesta