CSS Grid kann automatische Höhenübergänge 

Echter CSS-Trick-Alarm! Nelson Menezes hat einen neuen Weg herausgefunden (der derzeit nur in Firefox funktioniert), der ziemlich clever ist.

Vielleicht wissen Sie, dass CSS nicht zu auto-Dimensionen animieren kann, was sehr bedauerlich ist. Die Animation von Null auf "was auch immer nötig ist" wäre sehr oft sehr hilfreich. Wir haben die verfügbaren Techniken dokumentiert. Diese laufen darauf hinaus:

• Animieren Sie max-height auf einen Wert, der etwas höher ist als benötigt, was die Timing-Kurve unpräzise und ruckelig macht.
• Verwenden Sie JavaScript, um die endgültige Größe zu messen und dorthin zu animieren, was bedeutet ... die Verwendung von JavaScript.

Nelsons Technik ist keine davon, auch keine auf transform basierende Methode mit visuellen Ungeschicklichkeiten. Diese Technik nutzt CSS Grid im Kern ...

.expander {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 1s;
}

.expander.expanded {
  grid-template-rows: 1fr;
}

Unglaublich, in Firefox werden Inhalte innerhalb dieses Bereichs zwischen 0 und der natürlichen Höhe des Inhalts animiert. Es gibt nur ein wenig mehr, wie das Verstecken von Überlauf und Sichtbarkeit, um es richtig aussehen zu lassen und gleichzeitig die Zugänglichkeit zu erhalten.

Das ist wunderbar. Geben wir dieser Issue ein paar Sterne und vielleicht nimmt sich Chrome dessen an. Aber natürlich wäre es noch besser, wenn auto-Höhenübergänge einfach funktionieren würden. Ich kann mir nicht vorstellen, dass das völlig außerhalb der Möglichkeiten liegt.