LabEx
EntrarÚnete

Transición Suave de Alturas Dinámicas

Beginner

This tutorial is from open-source community. Access the source code

Introducción

En este laboratorio, exploraremos cómo hacer una transición suave en la altura de un elemento desde 0 hasta auto cuando su altura es desconocida. Esta técnica es útil para crear menús desplegables, acordeones y otros contenidos animados. Al utilizar las propiedades CSS transition, max-height y overflow, así como JavaScript para establecer dinámicamente el valor de la altura, podemos crear una experiencia de usuario sin problemas y visualmente atractiva.

Este es un Guided Lab, que proporciona instrucciones paso a paso para ayudarte a aprender y practicar. Sigue las instrucciones cuidadosamente para completar cada paso y obtener experiencia práctica. Los datos históricos muestran que este es un laboratorio de nivel principiante con una tasa de finalización del 100%. Ha recibido una tasa de reseñas positivas del 100% por parte de los estudiantes.

Transición de altura

index.html y style.css ya se han proporcionado en la máquina virtual.

Este fragmento de código realiza una transición en la altura de un elemento desde 0 hasta auto cuando su altura es desconocida mediante los siguientes pasos:

  • Utiliza la propiedad transition para especificar que los cambios en max-height deben transicionarse durante un período de 0,3 s.
  • Utiliza la propiedad overflow establecida en hidden para evitar que el contenido del elemento oculto desborde su contenedor.
  • Utiliza la propiedad max-height para especificar una altura inicial de 0.
  • Utiliza la pseudo-clase :hover para cambiar max-height al valor de la variable --max-height establecida por JavaScript.
  • Utiliza la propiedad Element.scrollHeight y el método CSSStyleDeclaration.setProperty() para establecer el valor de --max-height en la altura actual del elemento.
  • Nota: Este enfoque provoca un reflujo en cada fotograma de animación, lo que puede causar retrasos cuando hay un gran número de elementos debajo del elemento en transición.
<div class="trigger">
  Pasa el cursor por encima de mí para ver una transición de altura.
  <div class="el">Contenido adicional</div>
</div>

.el {
  transition: max-height 0.3s;
  overflow: hidden;
  max-height: 0;
}

.trigger:hover > .el {
  max-height: var(--max-height);
}

let el = document.querySelector(".el");
let height = el.scrollHeight;
el.style.setProperty("--max-height", height + "px");

Haga clic en 'Go Live' en la esquina inferior derecha para ejecutar el servicio web en el puerto 8080. Luego, puede actualizar la pestaña Web 8080 para previsualizar la página web.

Resumen

¡Felicitaciones! Has completado el laboratorio de Transición de Altura. Puedes practicar más laboratorios en LabEx para mejorar tus habilidades.