Versuche mein Element in Position zu halten (nach dem Übergang). Im Moment ist der übersetzte Ort genau dort, wo ich ihn haben möchte, aber dann springt mein Name zurück auf das Zitat. Fehle ich ein Stück Code oder gibt es einen Code, der das Zurückspringen ermöglicht?
Ursache und Lösung:
CSS-Transformationen können im Allgemeinen nicht auf Elemente angewendet werden, die die Einstellung display: inline haben. Es ist zwar seltsam, dass die transform zunächst vor dem Zurückschnappen zu passieren scheint, aber die Lösung wäre, die Einstellung in display: inline-block wie im folgenden Abschnitt zu ändern.
Warum wird das Element anfänglich übersetzt, wenn es nicht transformierbar ist?
Das Verhalten von Browsern (zumindest Chrome) scheint seltsam zu sein und ich kann nur denken, dass es ein Bug ist, aber es ist sehr wahrscheinlich, dass dieses Verhalten auf beschleunigtes Rendering in Browsern und auf die Art und Weise, wie Layer erstellt und verschoben werden, zurückzuführen ist höhere Leistung.
In modernen Browsern wird ein Compositing-Layer immer dann erstellt, wenn ein bestimmtes Kriterium von den Renderobjekten (den DOM-Knoten) erfüllt wird und eine animierte / übersetzte Transformation eine davon ist (siehe den in Referenzen erwähnten Artikel). Wenn dies passiert, wendet die GPU die Transformation nur auf die Compositing-Ebene an, indem sie ihre zusammengesetzten Attribute ändert. Dies (aus einem mir unbekannten Grund) scheint die Einstellung display auf dem Element nicht zu berücksichtigen und so wird das Element / Layer übersetzt.
Am Anfang und am Ende von transition wird jedoch die gesamte Seite neu dargestellt, da keine zusätzliche Compositing-Ebene erforderlich ist, nachdem% code_% vollständig ist und dieses Repaint das Element wieder in sein Original zurückversetzt Ort.
Unten ist ein sehr einfaches Snippet, das ich mit Transformationen am transition -Tag erstellt habe, um meinen obigen Punkt zu verdeutlichen. Führen Sie das Snippet aus, nachdem Sie die Optionen "Farbrechtecke anzeigen" und "Zusammengesetzte Ebenenränder anzeigen" in den Chrome-Entwicklungstools aktiviert haben (Informationen zum Aktivieren dieser Einstellungen finden Sie im Referenzartikel 3). Sie werden feststellen, dass wenn Sie span irgendwo auf hover und die body gerade starten, eine Farbe entsteht (grün oder rot blinkt auf dem Bildschirm), um die Compositing-Ebenen zu erstellen. Sobald dieser Vorgang abgeschlossen ist, werden Sie feststellen, dass ein orangefarbener Rahmen auf das transition -Tag angewendet wird. Dies ist der Compositing-Layer und Sie werden sehen, wie sich nur dieser Layer bewegt, wenn span passiert. Am Ende entfernt ein anderes Repaint die Schichten (da es nicht mehr benötigt wird) und bringt das Element basierend auf den Spezifikationen wieder an seinen richtigen Platz.
Wie bereits erwähnt, kann ich keine verbindliche Antwort darauf geben, warum sich die Compositing-Ebene auf diese Weise verhält, aber basierend auf dem Beispiel-Snippet und den Referenzartikeln können Sie sehen, dass meine Behauptung gut ist.
Referenzen:
oops - ich lese gerade Ihre Frage noch einmal. In diesem Beispiel springt der Name am Ende der Animation zurück und bleibt dort. Ich dachte, das ist was du wolltest.
Ok, der Übergang bleibt also nie im Schwebezustand. Ich habe hier eine mit Animation erstellt - Ссылка
%Vor%Das ist nicht genau dasselbe wie das, was Sie hatten, aber vielleicht können Sie es verfeinern. Fügen Sie einen weiteren Satz von Keyframes hinzu, um das blockquote-Div auf der linken Seite zu animieren, und fügen Sie einen Wert für font-weight in die vorhandene Animation ein, die ich erstellt habe.
Ich bin mir ziemlich sicher, dass - webkit - das einzige Präfix ist, das jetzt benötigt wird, da die meisten modernen Browser den Code ohne diesen Code ausführen werden, so dass Sie sehen können, dass alles mit diesem Präfix dupliziert wird.
Ich hoffe, das hilft.
Die einzige andere Sache ist, dass, wenn die Maus außerhalb des div verschoben wird, bevor die Animation beendet ist, sie in der Mitte der Animation auf "pausiert" zurückgeht.
Weitere Informationen zu Animationen, einschließlich der Reihenfolge der Abkürzungen - Ссылка
Tags und Links css html5 css3 css-transforms css-transitions