Ocultar barras de desplazamiento durante una animación

 

 

 

CSS todavía no puede animar las autodimensiones.

.dropdown { transition: 0.2s; height: 0;}.dropdown.open { /* the height will change, but it won't animate. */ height: auto;}

Hay trucos de JavaScript que puedes probar. Brandon Smith describió aquí varias técnicas hace un tiempo. Mi mente siempre va a esta solución solo porque es muy simple:

.dropdown { transition: 0.2s; max-height: 0;}.dropdown.open { /* */ max-height: 400px;}

Ahora tenemos este 400pxnúmero mágico que en realidad no es ideal. Pero el hecho de que esto funcione y sea tan simple lo hace extremadamente atractivo para que lo use en producción todo el tiempo.

 

Pero el número mágico no es el único problema. Otro problema son las barras de desplazamiento.

Cuando configuramos max-height: 0;, también debemos overflow: hidden;asegurarnos de que el menú desplegable esté realmente oculto cuando esté cerrado. Cuando el menú desplegable está abierto, probablemente deberíamos usarlo overflow: auto;para no cortar accidentalmente el contenido en caso de que la altura natural del menú desplegable sea más alta que max-heightdespués de expandirse. El uso de overflow: auto;resuelve ese problema e introduce otro: durante la expansión, nuestro menú desplegable siempre tendrá barras de desplazamiento durante al menos parte de la expansión, incluso si la altura de expansión final no las necesita. ¡Eso es incómodo!

Trucos CSS al rescate.

Todavía podemos usarlo overflow: auto;en el estado expandido; simplemente lo anularemos durante la animación. Como aprendimos en la gran batalla por la especificidad de CSS , @keyframestienen una capacidad asombrosa para anular cualquier cosa mientras están activos. Usémoslos no para animar la apertura, sino sólo para esta funcionalidad de ocultar la barra de desplazamiento:

.dropdown { max-height: 0; overflow: hidden; transition: max-height 1.2s ease-in-out;}.dropdown.open { overflow: auto; max-height: 400px; animation: hide-scroll 1.2s backwards;}@keyframes hide-scroll { from, to { overflow: hidden; } }

¡Eso funciona!

Intente ajustar la altura a algo menor para ver cómo no ve barras de desplazamiento durante la animación, sino solo al final, cuando son necesarias. Eso causa un poco de sacudidas cuando aparece la barra de desplazamiento, pero fue aceptable en mi caso, ya que es raro que suceda. Si absolutamente quisiera detener las sacudidas, probablemente aplicaría una barra de desplazamiento (personalizada) en todo momento al menú desplegable y tal vez ajustaría el estilo de la barra de desplazamiento durante la animación, si fuera necesario. calculadora de dias fertiles


Le damos crédito aquí al Sr. Stephen Shaw del elegante @keyframers por este truco. Lo atraje para que me ayudara a resolverlo mientras trabajaba en algo en CodePen. Decidimos convertir el truco en un vídeo para el canal CodePen que muestra el modo Collab , que utilizamos para descubrir el problema/solución:






SUSCRÍBETE A NUESTRO BOLETÍN 

No te pierdas de nuestro contenido ni de ninguna de nuestras guías para que puedas avanzar en los juegos que más te gustan.










Al suscribirte, aceptas nuestra política de privacidad y nuestros términos de servicio.






Tal vez te puede interesar:

  1. La innovación no puede mantener la Web rápida
  2. Rendimiento web ultrarrápido
  3. Tabla de contenidos fijos con estados activos de desplazamiento
  4. “cambiar tamaño: ninguno;” en áreas de texto es una mala experiencia de usuario

Ocultar barras de desplazamiento durante una animación

Ocultar barras de desplazamiento durante una animación

Hay trucos de JavaScript que puedes probar. Brandon Smith describió aquí varias técnicas hace un tiempo. Mi mente siempre va a esta solución solo porque es

programar

es

https://pseint.es/static/images/programar-ocultar-barras-de-desplazamiento-durante-una-animacion-1582-0.jpg

2024-06-13

 

Ocultar barras de desplazamiento durante una animación
Ocultar barras de desplazamiento durante una animación

Si crees que alguno de los contenidos (texto, imagenes o multimedia) en esta página infringe tus derechos relativos a propiedad intelectual, marcas registradas o cualquier otro de tus derechos, por favor ponte en contacto con nosotros en el mail [email protected] y retiraremos este contenido inmediatamente

 

 

Update cookies preferences