Altura de transición en CSS

1. Use la propiedad transition con las propiedades max-height y overflow para la altura de transición en CSS
2. Use la propiedad transform con transition a Transition Height en CSS

Este artículo presentará algunos métodos para aplicar una transición a la altura de un elemento en CSS.

Use la propiedad transition con las propiedades max-height y overflow para la altura de transición en CSS

Una transición es una propiedad ampliamente utilizada para cambiar el valor de una propiedad sin problemas durante un período determinado. La transición también puede llamarse animación.

La transición tiene ciertas propiedades como transition-property, transition-duration, transition-timing-function y transition-delay. La transition-property define qué propiedad CSS se cambia usando el efecto de transición.

La transition-duration define cuánto tiempo debe tomar para completar la transición, es decir, tiempo en segundos. El transition-timing-function define cómo debe ocurrir la transición, es decir, qué efecto se le da a la transición.

La transition-timing-function puede tener ease, ease-in, ease-out, linear, ease-in-out, etc. La propiedad transition-delay especifica cuánto tiempo debe tomar para iniciar una transición.

Podemos combinar estas propiedades y usar una propiedad abreviada de transición de la siguiente manera.

transition: height 2s linear 1s;

Aquí, height denota transition-property, 2s define transition-duration, linear especifica transition-timing-function y 1s define transition-delay.

Podemos usar transition junto con la propiedad max-height para establecer la altura de un elemento de 0 a auto. Podemos pasar el cursor sobre el texto para cambiar la altura de un elemento HTML específico.

Podemos usar la propiedad overflow:hidden para ocultar los elementos que se desbordan cuando la altura máxima se establece en 0.

Por ejemplo, cree un div y asígnele una identificación de main. Dentro de ese div, cree una etiqueta de párrafo p y escriba Hover Me.

A continuación, cree una lista desordenada con la etiqueta ul y asígnele una identificación de items. Usando la etiqueta li, cree algunos elementos de lista dentro de ul.

En CSS, selecciona el id de items y establece max-height en 0. Esto asegura que los elementos dentro de ul no se muestren.

A continuación, establezca la propiedad background en gray. Establezca la propiedad overflow a hidden.

Ocultará los elementos ul desbordados cuando la max-height sea 0. Después de eso, establezca la propiedad transition a max-height 0.15s ease-out.

Le dará a los elementos de la lista un efecto de desaceleración mientras se desplaza el cursor del mouse.

Use el selector :hover para seleccionar la identificación main y luego seleccione la identificación de items. Luego, establezca el valor de max-height en 500px.

Como resultado, ajustará automáticamente su altura de acuerdo con los elementos ul cuando el tamaño de la pantalla sea inferior a 500 px. Luego, establezca la propiedad de transición como transition: max-height 0.25s ease-in;.

Esto establecerá la altura de los elementos ul en automático con el efecto ease-in dentro de los 0.25 segundos.

El siguiente ejemplo muestra que la lista desordenada se muestra mientras se desplaza el cursor sobre el texto con un efecto. Y la lista desordenada se desvanece mientras se desplaza fuera del texto.

<div id="main">
 <p>Hover Me</p>
 <ul id="items">
 <li>item1</li>
 <li>item2</li>
 <li>item3</li>
 <li>item4</li>
 </ul>
 </div>

#main #items {
 max-height: 0;
 transition: max-height 0.15s ease-out;
 overflow: hidden;
 background: gray;
}
#main:hover #items {
 max-height: 500px;
 transition: max-height 0.25s ease-in;
}

Use la propiedad transform con transition a Transition Height en CSS

La propiedad transform se utiliza para la transformación 2D o 3D de un elemento. Esta propiedad puede tener valores como rotate, scale, skew, move, translate etc.

En este tutorial, utilizaremos el scale para cambiar la altura de un elemento. Y también utilizaremos la propiedad transition para crear una animación mientras se produce el cambio de altura.

La propiedad scale se utiliza para cambiar el tamaño del elemento. Podemos usar scale en el eje X usando scaleX y escalar en el eje Y usando scaleY.

Aquí, usaremos scaleY para cambiar el tamaño de la altura del elemento, lo que debe hacerse verticalmente (a lo largo del eje Y). El valor scaleY(1) indica que la altura de un elemento es 100%, y el valor scaleY(0) indica que la altura de un elemento es 0%.

Hay una propiedad llamada transform-origin. Su valor nos dice desde dónde debe comenzar la transformación.

Como queremos expandir la altura de arriba a abajo aumentando la altura de 0 a auto, podemos establecer el valor de transform-origin a top. Al pasar el ratón por un elemento, podemos establecer el valor de transform a scaleY(1) para establecer su altura a auto.

Usaremos la misma plantilla HTML utilizada en el primer método para la demostración.

Por ejemplo, seleccionamos el id de items como #main #items y aplicamos los estilos. Establece el background-color como gray.

A continuación, establezca la propiedad transform en scaleY(0). Esto establece la altura del elemento en 0.

Luego establezca la propiedad transform-origin en top ya que queremos que la transformación comience de arriba hacia abajo. Luego aplique los estilos transform 0.3s ease para la propiedad transition.

Aquí transform indica la propiedad donde queremos que ocurra la animación mientras se desplaza. Los 0.3 indican el tiempo que tardará en completarse la animación.

La facilidad indica la transition-timing-function, lo que significa que la animación debe ocurrir. Finalmente, establezca la propiedad transform en scaleY(1) utilizando el selector : hover.

Cuando desplazamos el div, la altura de ul aumenta a medida que el valor de transform cambia de scaleY(0) a scaleY(1).

Código de ejemplo:

<div id="main">
 <p>Hover Me</p>
 <ul id="items">
 <li>item1</li>
 <li>item2</li>
 <li>item3</li>
 <li>item4</li>
 </ul>
 </div>

#main #items {
 background-color: gray;
 transform: scaleY(0);
 transform-origin: top;
 transition: transform 0.3s ease;
}
#main:hover #items {
 transform: scaleY(1);
}