Ich habe ein jsFiddle zusammengestellt, um meine Frage zu illustrieren:
Ich habe eine Funktion, die auf ein bestimmtes Element schwenkt und zoomen kann. Dies wird verwendet, um den Übergang zwischen Bildern in einem Comic zu erstellen.
Ich arbeite mit jQuery's .animate (), aber ich würde gerne CSS-Transformationen verwenden, wenn sie verfügbar sind, da sie in modernen Browsern wesentlich besser funktionieren.
Ich kann jedoch anscheinend das gleiche Verhalten nicht korrekt wiederherstellen.
Anstatt es hier schlecht zu beschreiben, sehen Sie, wenn Sie sich die jsFiddle anschauen, zwei Sätze von Steuerelementen, wobei jede Taste einem Bild im "Comic" entspricht. Die jQuery animate-Steuerelemente verhalten sich korrekt und die css-transformierten Steuerelemente nicht.
Das Problem scheint auf die Messung der offset () - Attribute zurückzuführen zu sein, sobald ein Element mit css-transforms skaliert wurde.
Jede Hilfe würde sehr geschätzt werden.
HINWEIS: Sie müssen jsFiddle erneut ausführen, wenn Sie die Methode von .animate in Transformationen und umgekehrt umschalten, um das CSS zurückzusetzen, das beim Ausführen der Funktion geändert wird.
BEARBEITEN: Ich habe gerade den Link zum jSfiddle korrigiert ... Entschuldigung für die, die es schon gesehen haben. Der ursprüngliche Link fehlte Teil des Beispielcodes. Um nur zu verdeutlichen, muss ich prozentbasierte Werte verwenden, da die gesamte App vollständig reagiert.
Es ist sicherlich nicht der direkteste Weg, aber ziehen Sie in Erwägung, jQuery Transit (http://ricostacruz.com/jquery.transit/) auf Ihre .animate-Version anzuwenden, nur um zu sehen, wie es die Umwandlung in CSS3-Transformation behandelt. Dann könntest du vielleicht von dort rückwärts arbeiten.
Tags und Links jquery css css-transforms jquery-animate