Implementierung des CSS-Animationseffekts für dynamische Höhenübergänge

Diese Frage stammt aus einer Nachricht auf Nuggets. Ein Freund fragte, warum die Höhenübergangsanimation des folgenden Codes ungültig ist?

Der Pseudocode sieht wahrscheinlich so aus:

{
    Höhe: nicht festgelegt;
    Übergang: alle 0,3 s linear;
    wird sich ändern: Höhe;
 
    &.hoch {
        Höhe: 0;
    }
    &.runter {
        Höhe: nicht festgelegt;
    }
}

Wenn wir es in einer tatsächlichen Demo wiederherstellen, ist der Effekt wahrscheinlich dieser (die wesentliche Idee besteht darin, .up und .down -Klassen des Elements zu vertauschen, um es zu erweitern und zu schließen):

ähm, ähm? Es ist sehr seltsam. Ich habe eindeutig transition für height festgelegt, aber warum wird die Übergangsanimation nicht ausgelöst, sondern direkt in einem Schritt erweitert?

Wir erwarten folgende Wirkung:

Übergang unterstützt keine Höhe: automatisch

Wenn der obige Code auf height: unset eingestellt ist, entspricht dies tatsächlich der Einstellung height: auto . Unsere Idee ist, zu hoffen, dass dieser Code die dynamische Höhe des Textcontainers unterstützen kann. Wechseln Sie bei jeder Erweiterung einfach zur Höhe des Containers selbst.

Laut Spezifikation liegt der Grund darin, dass der CSS-Übergang keine Änderungen der Elementhöhe auf Auto unterstützt.

Wenn Sie die obige height: unset durch einen bestimmten Höhenwert ersetzen, wird die Animation wirksam, zum Beispiel:

{
    &.hoch {
        Höhe: 0;
    }
    &.runter {
      - Höhe: nicht festgelegt;
      + Höhe: 500px;
    }
} 

Wir möchten aber auch einen dynamischen Höhenübergang realisieren. Geht das nicht anders?

Nutzen Sie die maximale Höhe geschickt, um sich an die dynamische Höhe anzupassen

Hey, hier ist ein sehr interessanter kleiner Trick. Da height: auto nicht unterstützt wird, werden wir einen anderen Weg finden, die max-height -Funktion zu verwenden, um eine dynamische Höhenerweiterung zu erreichen.

Ändern wir den obigen Code, ersetzen height: 0 durch max-height: 0 und height: auto durch max-height: 1000px . Der Pseudocode sieht wahrscheinlich so aus:

{
    maximale Höhe: 0;
    Übergang: max. Höhe 0,3 s linear;
 
    &.hoch {
        maximale Höhe: 0;
    }
    &.runter {
        maximale Höhe: 1000px;
    }
}

Schätzen wir die maximale Höhe des tatsächlichen Containers. 1000px müssen hier nur höher sein als die maximale Höhe. Allerdings darf sie nicht zu hoch eingestellt werden. Die höchste Einstellung sollte nahe an der maximalen Nutzungshöhe liegen. Warum, darüber sprechen wir später.

Da max-height nur die maximale Höhe des Textes begrenzt, wird der Container nicht weiter wachsen, wenn seine tatsächliche Höhe die maximale Höhenbegrenzung nicht erreicht. Sehen Sie sich die Auswirkungen an:

CodePen-Demo – der Übergang der Höheneigenschaft funktioniert nicht

Kleinere Mängel

Der Gesamteindruck ist immer noch sehr schön, natürlich kann es zwei kleine Mängel geben,

1. Wenn in tatsächlichen Szenarien max-height erforderlich ist und andere Funktionen vorhanden sind, erfüllt diese Methode möglicherweise nicht die Anforderungen.
2. Ein weiterer Nachteil ist die visuelle Verzögerung, die umso deutlicher wird, je größer die Abweichung zur tatsächlichen Körpergröße ist. Das heißt, wenn die tatsächliche Höhe des Containers nur 200 Pixel beträgt, ist max-height 1000 Pixel, die Animationszeit beträgt 1 Sekunde und die Easing-Funktion ist linear. Die eigentliche Übergangszeit der Animation von 0 auf 200 Pixel Höhe beträgt nur 0,2 Sekunden, was beachtet werden muss.

Denn die ursprüngliche Erweiterungsanimation sollte die Höhe des Containers in 1 Sekunde auf 1000 Pixel strecken, stoppte aber tatsächlich bei 200 Pixel, sodass die Animationszeit nur 0,2 Sekunden betrug. Zusammenfassend lässt sich sagen, dass die Methode gut ist, bei ihrer Anwendung jedoch eine spezifische Analyse erforderlich ist.

Dies ist das Ende dieses Artikels über die Implementierung des dynamischen CSS-Höhenübergangsanimationseffekts. Weitere verwandte CSS-Höhenübergangsanimationsinhalte finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!