Scrollbalken während einer Animation ausblenden

CSS kann immer noch nicht zu auto-Dimensionen animieren.

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

Es gibt JavaScript-Tricks, die du ausprobieren kannst. Brandon Smith hat hier vor einiger Zeit mehrere Techniken vorgestellt. Mein Gedanke geht immer zu dieser Lösung, weil sie so einfach ist.

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

Jetzt haben wir diese 400px magische Zahl, was wirklich nicht ideal ist. Aber die Tatsache, dass dies funktioniert und so einfach ist, macht es extrem attraktiv, dass ich es ständig in der Produktion verwende.

Aber die magische Zahl ist nicht das einzige Problem. Ein weiteres Problem sind Scrollbalken.

Wenn wir max-height: 0; setzen, benötigen wir auch overflow: hidden;, um sicherzustellen, dass das Dropdown beim Schließen tatsächlich ausgeblendet wird. Wenn das Dropdown geöffnet ist, sollten wir wahrscheinlich overflow: auto; verwenden, damit wir nicht versehentlich Inhalt abschneiden, falls die natürliche Höhe des Dropdowns nach dem Erweitern höher ist als die max-height. Die Verwendung von overflow: auto; löst dieses Problem, führt aber ein weiteres ein: *während* der Erweiterung hat unser Dropdown *immer* Scrollbalken für zumindest einen Teil der Erweiterung, selbst wenn die endgültige Erweiterungshöhe sie nicht benötigt. Das ist unschön!

CSS-Tricks zur Rettung.

Wir können weiterhin overflow: auto; im erweiterten Zustand verwenden – wir überschreiben es einfach während der Animation. Wie wir in der großen CSS-Spezifitäts-Schlacht gelernt haben, haben @keyframes die erstaunliche Fähigkeit, alles zu überschreiben, solange sie aktiv sind. Nutzen wir sie nicht, um das Öffnen zu animieren, sondern nur für diese Scrollbalken-ausblendende Funktionalität.

.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; } 
}

Das erledigt die Aufgabe!

Versuche, die Höhe auf etwas Kleineres einzustellen, um zu sehen, wie du während der Animation keine Scrollbalken siehst, sondern erst am Ende, wenn sie benötigt werden. Das verursacht ein kleines Ruckeln, wenn der Scrollbalken erscheint, aber das war in meinem Fall akzeptabel, da es selten vorkommt. Wenn du das Ruckeln absolut vermeiden wolltest, würdest du dem Dropdown wahrscheinlich jederzeit einen (benutzerdefinierten) Scrollbalken zuweisen und vielleicht die Styling des Scrollbalkens während der Animation anpassen, falls nötig.

---

Der Dank für diesen Trick gebührt Herrn Stephen Shaw von den schicken @keyframers. Ich habe ihn hinzugezogen, um mir bei der Lösung zu helfen, während ich daran für etwas auf CodePen gearbeitet habe. Wir beschlossen, den Trick in ein Video für den CodePen-Kanal zu verwandeln, das den Collab Mode vorstellt, den wir verwendet haben, um das Problem/die Lösung zu erarbeiten.