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.

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: