Elementtransformation animieren drehen

82

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)'
});
Kalpaitch
quelle
1
Es gibt ein jQuery-Plugin, das CSS-Transformationen animiert. Funktioniert in Firefox, Chrome, Safari, Opera und Internet Explorer. github.com/puppybits/QTransform
Puppybits
Endete hier in einer Suche mit dem gleichen Thema und lud das Plugin herunter; funktioniert gut, aber es hat einen Konflikt mit dieser Anweisung in einem anderen Plugin verursacht, das ich erstellt habe: $ ("#" + self.id) .css ("transform", "scale (1)"); Ich habe diese Zeile geändert: elem.style [$. CssProps.transform] = val + '%'; dazu: if (isNaN (val)) elem.style [$. cssProps.transform] = val; sonst elem.style [$. cssProps.transform] = val + '%'; Ich denke, es bedarf keiner weiteren Erklärung.
sergio0983

Antworten:

95

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)'); 
}
...
Ryley
quelle
Dies ist eine schmerzhafte Lösung sowohl hinsichtlich der Codepflege als auch der Geschwindigkeit. Vergiss jQuerybeim transformÜberprüfen meine Lösung.
Dyin
Was ist, wenn Sie einen Wert haben, der sich ständig ändert, um ihn zu drehen, und keinen festen?
Edonbajrami
78

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 .

atonyc
quelle
3
Die Verwendung von Z-Index ist auch eine gute Option, wenn Sie ihn nirgendwo anders verwenden. aber du würdest das nicht negativ sehen wollen.
Sherzod
4
Vielleicht möchten Sie auch die Erweiterungen -ms- und -o- hinzufügen (siehe css3please.com )
Joram van den Boezem
Wie können Sie gleichzeitig zusätzliche Eigenschaften animieren?
MadTurki
@ MadTurki, ich habe unten eine Antwort auf deine Frage geschrieben!
Skagedal
5
jQuery ist intelligent genug, um alle Präfixe -moz-, -webkit- usw. für Sie hinzuzufügen, sodass Sie diesen Code ein wenig vereinfachen können. sehr gute Antwort. +1
Octopus
48

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.

Dyin
quelle
1
Das ist in Ordnung, aber es ist auf Browser beschränkt , die CSS3-Übergänge unterstützen . Also kein IE8 oder IE9. Das ist ein ziemlich großes Segment, um aufzugeben.
Ryley
11
@ Ryley Sie sprechen über 12% der Benutzer. IE8- oder IE9-Benutzer liegen unter 5%. Es ist kein ziemlich großes Segment, das man aufgeben muss, da wir immer noch über die Präsentationsebene und nicht über die Funktionalität sprechen. Ungefähr 5% Ihrer Besucher sehen Ihre 3D-Animationen nicht. Auch wenn ein Browser (IE) dies nicht unterstützt transition, werden Ihre Transformationen sicherlich auch nicht unterstützt.
Dyin
Das stimmt nicht ganz - transformwird von IE9 unterstützt. Aber ich stimme zu, dass es nicht die größte Benutzergruppe ist, die aufgibt (IE8).
Ryley
2
@Dyin Es sind keine 12%, es hängt von Ihrer Zielgruppe ab. Laut Google Analytics sind 50% der Nutzer meiner Firma im IE8. Der Schlüssel ist, Ihr Publikum zu kennen. Davon abgesehen: Bravo Dude! Diese Antwort ist viel besser als die beiden besten. Weg, um der "Rohdiamant" zu sein.
Ziggy
2
Dies berücksichtigt auch keine dynamischen Rotationswerte.
Yuschick
19

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 .

skagedal
quelle
Was ist myRotationProperty? Ist es etwas Benutzerdefiniertes, das Sie definiert haben? und was ist, nowhängt von diesem ab.
Muhammad Umer
@ MuhammadUmer - ja, myRotationPropertyist etwas Benutzerdefiniertes, eine erfundene, "gefälschte" CSS-Eigenschaft. nowist das erste Argument für die Schrittrückruffunktion, das die Änderung des Eigenschaftswerts in diesem Schritt angibt.
Skagedal
Dann haben Sie diese Eigenschaft auch in CSS initialisiert. Oder Sie können es einfach animieren, es nimmt es Null.
Muhammad Umer
7

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.

Paolo
quelle
Danke, hat für mich gearbeitet. Sie haben auch ein Semikolon hinter Ihrer schließenden Eltern vergessen.
Devin Carpenter
@ Sorrow123444 Ich bin froh, dass es für dich funktioniert hat. Ich habe das fehlende Semikolon behoben, danke
Paolo
3

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)
Faradin
quelle
1
//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');
            } 
Colin Rickels
quelle