Ich verwende einen CSS3-Stufenübergang, um ein Sprite von einem Zustand in einen anderen zu animieren.
Wenn ich eine Animation starte, werden die Einzelbilder einzeln angezeigt und hat einen schönen Übergangseffekt (klicken Sie auf "show / hide" Link in der Beispiel ). Wenn jedoch eine zweite Transition ausgelöst wird, während die erste noch läuft, ist die Frame-Position verloren und es sieht so aus, als würde sie auf die andere Seite scrollen, anstatt die Frame-für-Frame Animation beizubehalten (klicken Sie auf "Trigger Bug" in der Beispiel ).
%Vor%Gibt es eine Möglichkeit, die Animation auch dann korrekt auszuführen, wenn sie einen älteren abgebrochen hat?
PS: Bitte nicht versuchen, den Trigger-Bug-Button zu "reparieren", der nur für Demozwecke da ist. Das eigentliche Problem wird durch eine schnelle Benutzerinteraktion ausgelöst, die eine unmittelbare Rückmeldung haben sollte.
Hier ist das Problem:
Es gibt 10 Frames, daher verwenden Sie 10 Schritte für die Animation. Im Grunde tritt der CSS-Baum zehn Mal für Baum-aktiv und zehn Mal für Baum-Nicht-Aktiv.
Wenn Sie den Baum bei Bild 8 deaktivieren, kehrt er die Animationsrichtung wie erwartet um, aber er wird 10 Mal anstelle von 8 schreiten. Dadurch sieht es so aus, als ob es gleitet, aber es stoppt gerade in den 10 Intervallpositionen für die 8 Frames.
Macht das Sinn?
Für diese Art von Animation wäre es besser, eine JS-Lösung zu verwenden, in der die aktuelle Bildposition bekannt ist und die erforderlichen Schritte korrekt berechnet werden.
Ich hoffe, das hilft!
Wie ThePav sagt, gibt es keine Möglichkeit, CSS bekannt zu machen, in welchem Zustand es ist. Es wird also immer eine steps (10) -Funktion geben, auch wenn von der Mitte des vorherigen Übergangs aus begonnen wird, und mit einer Hintergrundposition, die weniger Schritte benötigt.
Der einfachste Weg, dies zu lösen (nicht einfach, aber am einfachsten), besteht darin, einen parallelen Z-Index-Übergang zu setzen, den Sie auf die gleiche Weise wie die Hintergrundposition festlegen. Wenn Sie ihnen einen beliebigen Z-Index geben können, würde der Z-Index von 0 bis 10 gehen.
%Vor%Dann dient die Eigenschaft z-index als Indikator für einen laufenden Übergang, und Sie können die Funktion steps im Skript so einstellen, dass die Klasse geändert wird.
Das heißt, holen Sie sich den Wert von z-index und setzen Sie diesen auf transitionTimingFunction: 'steps (' + zindexval + ')'
(Sie könnten dies auch mit der Eigenschaft background-position tun, aber es ist viel schwieriger.)
Der Code wäre
%Vor%Verwenden Sie transitionend, um darauf zu warten, die Klasse "tree-hidden" zu entfernen. Sonst könnte man nicht anders lösen.
%Vor%AKTUALISIEREN
%Vor%Auf diese Weise wird die Transaktion nicht unterbrochen, bis die Animation fertig ist, unabhängig davon, ob Sie auf mehr Zeit klicken.
CSS-Transaktionsrückfall
Wenn Sie einen Fallback benötigen, können Sie den folgenden Code verwenden
%Vor%