Warum funktionieren CSS-Übergänge nicht mit responsiven Bildschiebereglern?

Browser-Reflow bei CSS-Änderungen erzwingen

Beim Erstellen eines nicht auf jQuery reagierenden Bildschiebereglers, der auf CSS3-Übergängen basiert, kann es zu einem Problem kommen, bei dem Änderungen an CSS-Eigenschaften lösen keine Animationen aus. Dies liegt an der Browseroptimierung, die Eigenschaftsänderungen vereinfacht und Animationen überspringt.

Um dieses Problem zu beheben, muss ein Browser-Reflow erzwungen werden. Reflow ist der Prozess, bei dem der Browser das Layout eines Elements neu berechnet und es als Reaktion auf Stiländerungen neu positioniert.

In Ihrem Code-Snippet legen Sie die Übergangseigenschaft auf „keine Nullen linear“ fest, bevor Sie das anfängliche CSS erstellen Änderungen und schalten Sie es dann wieder auf „Alle 0,2 Sekunden Ease-Out“ um. Dieser Ansatz löst jedoch keinen Reflow aus und daher erfolgt keine Animation.

Die Lösung besteht darin, explizit die offsetHeight des Elements anzufordern, nachdem CSS-Änderungen vorgenommen wurden. Diese Aktion initiiert einen Reflow und zwingt den Browser, die geänderten Stile zu bestätigen und anzuwenden.

Der Code, um dies zu erreichen, ist:

function reflow(elt){
    console.log(elt.offsetHeight);
}

Wobei „elt“ das von Ihnen erstellte Element ist Stil ändert sich zu. Der Aufruf von „reflow(elt)“ nach dem Vornehmen der CSS-Änderungen löst die gewünschte Animation aus.

Das obige ist der detaillierte Inhalt vonWarum funktionieren CSS-Übergänge nicht mit responsiven Bildschiebereglern?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!