Tipps zur Optimierung von CSS-Schattenanimationen

Diese Technik stammt aus diesem Artikel - So animieren Sie Box-Shadow mit seidenweicher Leistung

Dieser Artikel ist keine wörtliche Übersetzung, aber ich habe ihn geschrieben, weil ich diese Technik sehr interessant und nützlich fand.

box-shaodw wird in unserer Arbeit immer häufiger verwendet und die Animation des dazugehörigen Schattens ist mehr oder weniger vorhanden. Angenommen, wir haben die folgende Box:

div {
    Breite: 100px;
    Höhe: 100px;
    Kastenschatten: 0 2px 4px rgba (0, 0, 0, 0,3);
}

Ich hoffe, dass sich der Schatten der Box beim Schweben von box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) zu box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3) .

box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) --> box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3)

OK, der einfachste Weg ist natürlich:

div:hover {
    Breite: 100px;
    Kastenschatten: 0 5px 15px rgba (0, 0, 0, 0,3);
}

Da die Übergangsanimation in zwei verschiedenen Boxschattenzuständen erfolgt, zeichnet der Browser den Boxschatten während der Übergangsanimation weiterhin neu. Und da Schatten leistungsintensive Stile sind, wirkt diese Art der Animation etwas verzögert.

Hier ist ein kleiner Trick, um die Schattenanimation in diesem Fall zu optimieren.

Optimieren mit Pseudoelementen und Transparenz

Mithilfe von Pseudoelementen und Transparenz zur Optimierung fügen wir dem obigen Element ein Pseudoelement mit derselben Größe wie das übergeordnete Div hinzu und fügen diesem Element im Voraus den erforderlichen endgültigen Box-Schattenzustand hinzu, aber die Transparenz des Elements beträgt 0.

div {
    Position: relativ;
    Breite: 100px;
    Höhe: 100px;
    Kastenschatten: 0 2px 4px rgba (0, 0, 0, 0,3);
}
 
div::vor {
    Inhalt: "";
    Position: absolut;
    oben: 0;
    links: 0;
    Breite: 100 %;
    Höhe: 100%;
    Kastenschatten: 0 5px 15px rgba (0, 0, 0, 0,3);
    Deckkraft: 0;
}

Dann müssen wir beim Hovern nur noch die Deckkraft des Pseudoelements von 0 auf 1 setzen.

div:hover::vor {
    Deckkraft: 1;
}

Der Vorteil hierbei besteht darin, dass die tatsächliche Schattenänderung lediglich eine Änderung der Transparenz ist, ohne dass der Schatten ständig neu gezeichnet werden muss. Dadurch wird die Glätte der Schattenanimation effektiv verbessert und sie sieht glatter aus.

Warum ist die Animation opacity leistungsfähiger als die Animation von box-shadow ? Sie können einen Blick auf diese Tabelle werfen, in der die Auswirkungen verschiedener Attributänderungen auf den Seitenumbruch und das Neuzeichnen aufgelistet sind:

sehr wenige CSS-Eigenschaften

Abschließend können Sie sich die Demo ansehen:

CodePen-Demo – Optimieren von Box-Shadow-Animationen

Bestehende Probleme, eine andere Lösung

Die obige Lösung im Originaltext ist eigentlich nicht perfekt, da der endgültige Effekt die Überlagerung zweier Schatten ist, wodurch die Gesamtschattenfarbe möglicherweise etwas dunkler wird.

Daher ist es notwendig, den endgültigen Schatten zu optimieren, den Effekt etwas abzuschwächen und zu versuchen, den überlagerten Effekt der beiden Schatten dem eines einzelnen Schattens anzunähern.

Natürlich können wir die obige Lösung noch weiter optimieren. Wir verwenden ein weiteres ::after -Pseudoelement, setzen ::after -Pseudoelement auf den Anfangszustand mit einer Deckkraft von 1 und das ::before -Pseudoelement auf den Endzustand mit einer Deckkraft von 0:

Beim Hovern wird eines der beiden Pseudoelemente angezeigt und das andere ausgeblendet. Auf diese Weise ist der endgültige Effekt nur ein Schatteneffekt ohne Schattenüberlagerung, was dem direkten Übergang des Schattens entspricht:

CodePen-Demo – Optimieren von Box-Shadow-Animationen

Zusammenfassen

Oben sind die vom Editor vorgestellten CSS-Schattenanimationsoptimierungstechniken aufgeführt. Ich hoffe, dass sie für alle hilfreich sind. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht und der Editor wird Ihnen rechtzeitig antworten. Ich möchte auch allen für ihre Unterstützung der Website 123WORDPRESS.COM danken!
Wenn Sie diesen Artikel hilfreich finden, können Sie ihn gerne abdrucken und dabei bitte die Quelle angeben. Vielen Dank!