Animate element transform obróć

Odpowiedź Ryleya jest świetna, ale mam tekst w elemencie. Aby obrócić tekst wraz ze wszystkim innym, użyłem właściwości border-spacing zamiast text-indent.

Również, aby nieco wyjaśnić, w stylu elementu, Ustaw swoją wartość początkową:

#foo {
    border-spacing: 0px;
}

Następnie w części animate, twoja ostateczna wartość:

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

Oto demo na żywo .

Moim zdaniem, jQuery animate jest nieco nadużywane, w porównaniu do CSS3 transition, który wykonuje taką animację na dowolnej właściwości 2D lub 3D. Również obawiam się, że pozostawienie go do przeglądarki i zapominając o warstwie zwanej JavaScript może doprowadzić do oszczędzenia soku procesora - specjalnie, gdy chcesz wybuch z animacjami. Dlatego lubię mieć animacje, w których znajdują się definicje stylów, ponieważ definiujesz funkcjonalność za pomocą JavaScript . Im więcej prezentacji wstrzyknij do JavaScript, tym więcej problemów napotkasz później.

Wszystko, co musisz zrobić, to użyć addClass do elementu, który chcesz animować, gdzie ustawiasz klasę, która ma właściwości CSS transition. Możesz po prostu "aktywować" animację , która pozostaje zaimplementowana na czystej warstwie prezentacji.

.js

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

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

Można łatwo usunąć klasę z jQuery, lub usunąć klasę bez biblioteka .

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

Jest to szybkie i wygodne rozwiązanie dla większości przypadków użycia.

Używam tego również, gdy chcę zaimplementować inną stylizację (alternatywne właściwości CSS )i chcę zmienić styl w locie za pomocą globalnego.Animacja 5s. Dodaję nową klasę do BODY, mając alternatywny CSS w postaci to:

.js

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

.css

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

W ten sposób można zastosować różne style z animacjami, bez ładowania różnych plików CSS. Włącza się tylko JavaScript, aby ustawić class.

Aby dodać do odpowiedzi Ryleya i atonyca, nie musisz używać prawdziwej właściwości CSS, takiej jak text-index lub border-spacing, ale zamiast tego możesz określić fałszywą właściwość CSS, taką jak rotation lub my-awesome-property. Dobrym pomysłem może być użycie czegoś, co nie ryzykuje, że stanie się rzeczywistą właściwością CSS w przyszłości.

Również ktoś zapytał, jak animować inne rzeczy w tym samym czasie. Można to zrobić jak zwykle, ale pamiętaj, że funkcja step jest wywoływana dla każdej animowanej właściwości, więc będziesz mieć aby sprawdzić swoją nieruchomość, w ten sposób:

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

(uwaga: nie mogę znaleźć dokumentacji obiektu "Tween" w dokumentacji jQuery; na stronie dokumentacji programu animate znajduje się link do http://api.jquery.com/Types#Tween który jest sekcją, która wydaje się nie istnieć. Kod dla prototypu animacji można znaleźć na Github tutaj ).

Po prostu użyj przejść CSS:

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

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

Jako przykład ustawiłem czas trwania animacji na 0,5 sekundy.

Zwróć uwagę na setTimeout, Aby usunąć właściwość transition css po zakończeniu animacji (500 ms)

Dla czytelności pominąłem przedrostki vendora.

To rozwiązanie wymaga oczywiście obsługi przejścia przez przeglądarkę.

Natknąłem się na ten post, chcąc użyć transformacji CSS w jQuery do nieskończonej animacji pętli. Ten mi pasował. Nie wiem, jak profesjonalnie to wygląda.

function progressAnim(e) {
    var ang = 0;

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

Przykład użycia:

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