Eine kurze Diskussion darüber, ob CSS-Animationen durch JS blockiert werden

Der Animationsteil von CSS wird von JS blockiert, die Animation der Transformation wird davon jedoch nicht beeinflusst.

Hier ist ein Leistungsdiagramm der bewegten Animation am linken Rand mit aktivierter JS-Blockierungsanimation.

<Stil>
.walkabout-old-school {
  Animation: 3 s Folienrand linear unendlich;
}
 
@keyframes Folienrand {
  von {margin-left: 0;}
  50 % {margin-left: 100 %;}
  bis {margin-left: 0;}
}
</Stil>
<Skript>
Funktion töten() {
  var start = +neues Datum;
  während (+neues Datum - Start < 2000){}
}
</Skript> 

In der obigen Abbildung ist deutlich zu erkennen, dass die Animation nach dem Ausführen der Kill-Methode 2 Sekunden lang stagniert, bevor sie fortgesetzt wird.

Aus der obigen Abbildung können wir ersehen, dass der Rendering-Prozess innerhalb von 2 Sekunden nach dem Aktivieren von js wartet, bis die Kill-Funktion ausgeführt wird, bevor er ausgeführt wird. In der folgenden Abbildung können wir sehen, dass Änderungen am Rand dazu führen, dass das DOM neu angelegt wird, und das Layout wird erst gestartet, wenn die Kill-Funktion ausgeführt wird. wird führen zu

Schauen Sie sich dann die Elemente an, die Transform als Animation verwenden

.walkabout-neue-schule {
  Animation: 3 s Gleittransformation, linear, unendlich;
}
@keyframes Folie-Transformation {
  von {transform: translatex(0);}
  50 % {transform: translatex(300px);}
  zu {transform: translatex(0);}
}

Die folgende Abbildung ist ein laufendes Vergleichsdiagramm (blau ist der Rand, grün ist die Transformation)

Aus der obigen Abbildung können wir erkennen, dass die Verwendung von Transform durch die Kill-Methode überhaupt nicht beeinflusst wird. Werfen wir einen Blick auf das Debugging-Diagramm

Hier ist zu sehen, dass der Rand häufig einen Seitenumbruch auslöst, während dies bei Transform nicht der Fall ist und js den Seitenumbruch blockiert. Daher bleibt die Randanimation hängen.

Daher können beim Einsatz von Animationen im täglichen Leben die beste Seitenleistung und die besten Effekte durch häufigere Transformationen erzielt werden.

Dies ist das Ende dieses Artikels darüber, ob CSS-Animationen durch JS blockiert werden. Weitere relevante Inhalte zum Blockieren von CSS-Animationen durch JS finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!