Wie würde ich ein Element mit einem jQuery drehen .animate()
? Ich verwende die folgende Zeile, die derzeit die Deckkraft korrekt animiert. Unterstützt dies jedoch CSS3-Transformationen?
$(element).animate({
opacity: 0.25,
MozTransform: 'rotate(-' + -amount + 'deg)',
transform: 'rotate(' + -amount + 'deg)'
});
Antworten:
Soweit ich weiß, können grundlegende Animationen nicht numerische CSS-Eigenschaften nicht animieren.
Ich glaube, Sie könnten dies mit einer Schrittfunktion und der entsprechenden CSS3-Transformation für den Browser des Benutzers erreichen. Die CSS3-Transformation ist etwas schwierig, um alle Ihre Browser abzudecken (IE6 müssen Sie beispielsweise den Matrix-Filter verwenden).
BEARBEITEN : Hier ist ein Beispiel, das in Webkit-Browsern (Chrome, Safari) funktioniert: http://jsfiddle.net/ryleyb/ERRmd/
Wenn Sie nur IE9 unterstützen möchten , können Sie FireFox
transform
anstelle von-webkit-transform
oder-moz-transform
unterstützen.Der verwendete Trick besteht darin, eine CSS-Eigenschaft zu animieren, die uns nicht wichtig ist (
text-indent
), und dann ihren Wert in einer Schrittfunktion zu verwenden, um die Rotation durchzuführen:quelle
jQuery
beimtransform
Überprüfen meine Lösung.Ryleys Antwort ist großartig, aber ich habe Text innerhalb des Elements. Um den Text zusammen mit allem anderen zu drehen, habe ich die Eigenschaft "Randabstand" anstelle des Texteinzugs verwendet.
Um ein wenig zu verdeutlichen, legen Sie im Stil des Elements Ihren Anfangswert fest:
Dann im Animationsblock Ihr endgültiger Wert:
In meinem Fall dreht es sich um 90 Grad gegen den Uhrzeigersinn.
Hier ist die Live-Demo .
quelle
Meiner Meinung nach ist jQuery's
animate
im Vergleich zu CSS3transition
, das solche Animationen für jede 2D- oder 3D-Eigenschaft ausführt, etwas überlastet . Ich befürchte auch, dass das Überlassen des Browsers und das Vergessen der Ebene mit dem Namen JavaScript zu Ersatz-CPU-Saft führen könnte - insbesondere, wenn Sie mit den Animationen sprengen möchten. Daher möchte ich Animationen haben, in denen sich die Stildefinitionen befinden, da Sie die Funktionalität mit JavaScript definieren . Je mehr Präsentationen Sie in JavaScript einfügen, desto mehr Probleme treten später auf.Sie müssen lediglich
addClass
das Element verwenden , das Sie animieren möchten, und eine Klasse mit CSS-transition
Eigenschaften festlegen . Sie "aktivieren" einfach die Animation , die auf der reinen Präsentationsebene implementiert bleibt ..js
Man kann eine Klasse einfach mit jQuery entfernen oder eine Klasse ohne Bibliothek entfernen .
.css
.html
Dies ist eine schnelle und bequeme Lösung für die meisten Anwendungsfälle.
Ich verwende dies auch, wenn ich ein anderes Styling (alternative CSS-Eigenschaften) implementieren und den Stil im laufenden Betrieb mit einer globalen .5s-Animation ändern möchte. Ich füge dem eine neue Klasse hinzu
BODY
, während ich alternatives CSS in einer Form wie dieser habe:.js
.css
Auf diese Weise können Sie unterschiedliche Stile mit Animationen anwenden, ohne unterschiedliche CSS-Dateien zu laden. Sie verwenden nur JavaScript, um a festzulegen
class
.quelle
transition
, werden Ihre Transformationen sicherlich auch nicht unterstützt.transform
wird von IE9 unterstützt. Aber ich stimme zu, dass es nicht die größte Benutzergruppe ist, die aufgibt (IE8).Um die Antworten von Ryley und atonyc zu ergänzen, müssen Sie keine echte CSS-Eigenschaft wie
text-index
oder verwendenborder-spacing
, sondern können eine gefälschte CSS-Eigenschaft wierotation
oder angebenmy-awesome-property
. Es könnte eine gute Idee sein, etwas zu verwenden, das nicht riskiert, in Zukunft eine tatsächliche CSS-Eigenschaft zu werden.Außerdem fragte jemand, wie man gleichzeitig andere Dinge animiert. Dies kann wie gewohnt durchgeführt werden. Beachten Sie jedoch, dass die
step
Funktion für jede animierte Eigenschaft aufgerufen wird. Sie müssen daher wie folgt nach Ihrer Eigenschaft suchen:(Hinweis: Ich kann die Dokumentation für das "Tween" -Objekt nicht in der jQuery-Dokumentation finden. Auf der Seite "Animation animieren" befindet sich ein Link zu http://api.jquery.com/Types#Tween , einem Abschnitt, der dies nicht tut Es scheint nicht zu existieren. Den Code für den Tween-Prototyp auf Github finden Sie hier .
quelle
now
hängt von diesem ab.myRotationProperty
ist etwas Benutzerdefiniertes, eine erfundene, "gefälschte" CSS-Eigenschaft.now
ist das erste Argument für die Schrittrückruffunktion, das die Änderung des Eigenschaftswerts in diesem Schritt angibt.Verwenden Sie einfach CSS-Übergänge:
Als Beispiel habe ich die Dauer der Animation auf 0,5 Sekunden eingestellt.
Beachten Sie die Option
setTimeout
zum Entfernen dertransition
CSS-Eigenschaft, nachdem die Animation beendet ist (500 ms).Aus Gründen der Lesbarkeit habe ich Herstellerpräfixe weggelassen.
Diese Lösung erfordert natürlich eine Unterstützung für den Übergang des Browsers.
quelle
Ich bin auf diesen Beitrag gestoßen und habe versucht, die CSS-Transformation in jQuery für eine Endlosschleifenanimation zu verwenden. Dieser hat gut für mich funktioniert. Ich weiß allerdings nicht, wie professionell es ist.
Anwendungsbeispiel:
quelle
quelle