Elementtransformation animieren drehen

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)'
});

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 transformanstelle von -webkit-transformoder -moz-transformunterstü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:

$('#foo').animate(
..
step: function(now,fx) {
  $(this).css('-webkit-transform','rotate('+now+'deg)'); 
}
...

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:

#foo {
    border-spacing: 0px;
}

Dann im Animationsblock Ihr endgültiger Wert:

$('#foo').animate({  borderSpacing: -90 }, {
    step: function(now,fx) {
      $(this).css('transform','rotate('+now+'deg)');  
    },
    duration:'slow'
},'linear');

In meinem Fall dreht es sich um 90 Grad gegen den Uhrzeigersinn.

Hier ist die Live-Demo .

Meiner Meinung nach ist jQuery's animateim Vergleich zu CSS3 transition, 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 addClassdas Element verwenden , das Sie animieren möchten, und eine Klasse mit CSS- transitionEigenschaften festlegen . Sie "aktivieren" einfach die Animation , die auf der reinen Präsentationsebene implementiert bleibt .

.js

// with jQuery
$("#element").addClass("Animate");

// without jQuery library
document.getElementById("element").className += "Animate";

Man kann eine Klasse einfach mit jQuery entfernen oder eine Klasse ohne Bibliothek entfernen .

.css

#element{
    color      : white;
}

#element.Animate{
    transition        : .4s linear;
    color             : red;
    /** 
     * Not that ugly as the JavaScript approach.
     * Easy to maintain, the most portable solution.
     */
    -webkit-transform : rotate(90deg);
}

.html

<span id="element">
    Text
</span>

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

$("BODY").addClass("Alternative");

.css

BODY.Alternative #element{
    color      : blue;
    transition : .5s linear;
}

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.

Um die Antworten von Ryley und atonyc zu ergänzen, müssen Sie keine echte CSS-Eigenschaft wie text-indexoder verwenden border-spacing, sondern können eine gefälschte CSS-Eigenschaft wie rotationoder angeben my-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 stepFunktion für jede animierte Eigenschaft aufgerufen wird. Sie müssen daher wie folgt nach Ihrer Eigenschaft suchen:

$('#foo').animate(
    {
        opacity: 0.5,
        width: "100px",
        height: "100px",
        myRotationProperty: 45
    },
    {
        step: function(now, tween) {
            if (tween.prop === "myRotationProperty") {
                $(this).css('-webkit-transform','rotate('+now+'deg)');
                $(this).css('-moz-transform','rotate('+now+'deg)'); 
                // add Opera, MS etc. variants
                $(this).css('transform','rotate('+now+'deg)');  
            }
        }
    });

(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 .

Verwenden Sie einfach CSS-Übergänge:

$(element).css( { transition: "transform 0.5s",
                  transform:  "rotate(" + amount + "deg)" } );

setTimeout( function() { $(element).css( { transition: "none" } ) }, 500 );

Als Beispiel habe ich die Dauer der Animation auf 0,5 Sekunden eingestellt.

Beachten Sie die Option setTimeoutzum Entfernen der transitionCSS-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.

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.

function progressAnim(e) {
    var ang = 0;

    setInterval(function () {
        ang += 3;
        e.css({'transition': 'all 0.01s linear',
        'transform': 'rotate(' + ang + 'deg)'});
    }, 10);
}

Anwendungsbeispiel:

var animated = $('#elem');
progressAnim(animated)

//this should allow you to replica an animation effect for any css property, even //properties //that transform animation jQuery plugins do not allow

            function twistMyElem(){
                var ball = $('#form');
                document.getElementById('form').style.zIndex = 1;
                ball.animate({ zIndex : 360},{
                    step: function(now,fx){
                        ball.css("transform","rotateY(" + now + "deg)");
                    },duration:3000
                }, 'linear');
            }