CSS-Übergang der Eigenschaft height von 0px zu auto

Hallo habr

Ich möchte eine andere Möglichkeit zum Erstellen eines CSS-Übergangs der Eigenschaft 0px von 0px zu auto 0px .

Dieses Problem trat bei der Entwicklung der Webkomponenten TreeView und DataGrid auf. In TreeView habe ich mich für eine reibungslose Erweiterung / Verkleinerung von Knoten und in einem DataGrid - Zeilen mit zusätzlichem Inhalt entschieden. Nachdem ich das Internet gelesen hatte, fand ich mehrere Implementierungsmethoden, die wichtigsten über die max-height und in Javascript. Die Javascript-Implementierung wurde ausgeschlossen - es gibt CSS mit Unterstützung für Übergänge und Animationen. Verbleibende max-height , besonders in den Beispielen mit Dropdown-Menüs funktioniert alles.

In der TreeView verfügt jeder Knoten über eine unbegrenzte Verschachtelung, sodass Sie die maximale Höhe seines Inhalts nicht sofort bestimmen können. Auch wenn Sie die max-height auf sehr groß festlegen, treten Probleme mit der Übergangsanimation auf. Wenn Sie die untergeordneten Knoten erweitern, erhöht sich auch die Höhe des übergeordneten Knotens und überlappt möglicherweise die max-height . Ob es max-height gefällt oder nicht, max-height nicht geeignet. DataGrid weist dasselbe Problem auf: Es können weitere Inhalte in einer Reihe vorhanden sein. Brauchen height:auto !

Beginnen wir also mit der Implementierung des Übergangs für die Eigenschaft 0px von 0px zu auto . Betrachten Sie ein einfaches Beispiel.

Lass:

• elBlock: HTMLDivElement - Block, der elBlock: HTMLDivElement / elBlock: HTMLDivElement soll;
• elToggle: HTMLButtonElement - Schaltfläche zum Umschalten des Status.

Definieren Sie eine CSS-Klasse für den Block, in dem der Inhalt und der Übergang selbst beschnitten werden:

 .block { overflow: hidden; transition: height 500ms ease; } 

Wir beschreiben den onClick Event- onClick für elToggle :

 elToggle.addEventListener("click", () => { if (elBlock.style.height === "0px") { elBlock.style.height = `${ elBlock.scrollHeight }px` } else { elBlock.style.height = `${ elBlock.scrollHeight }px`; window.getComputedStyle(elBlock, null).getPropertyValue("height"); elBlock.style.height = "0"; } }); 

Es bleibt die Rückgabehöhe hinzuzufügen height:auto nach dem Übergang:

 elBlock.addEventListener("transitionend", () => { if (elBlock.style.height !== "0px") { elBlock.style.height = "auto" } }); 

Nun, das ist alles, jetzt funktioniert das Erweitern / Reduzieren des Blocks wie es sollte und hängt nicht von der Größe des Inhalts ab.


Abbildung 1 - Ein Beispiel für das Erweitern / Reduzieren von Knoten in einer TreeView

Es ist erwähnenswert, die Nachteile dieses Ansatzes:

• mit Javascript möchte ich nur CSS;
• Während des Übergangs kann sich der Inhalt (seine Höhe, scrollHeight ) ändern. Wenn nach seiner Fertigstellung die auto Rückkehr erfolgt, ändert sich die Höhe des Blocks dramatisch in die eine oder andere Richtung. Um diesen Effekt zu vermeiden, müssen Sie die Änderung in scrollHeight und die height ändern. Wie die Praxis zeigt, dauert das Erweitern / Reduzieren von Übergängen in der Regel jeweils 0,5 Sekunden. In dieser Zeit hat der Benutzer wahrscheinlich keine Zeit, etwas im Inneren zu ändern. Erweitern Sie beispielsweise bei TreeView den untergeordneten Knoten.

Vielen Dank für Ihre Aufmerksamkeit!