Jak obrócić element z jQuery .animate()
? Używam poniższej linii, która obecnie prawidłowo animuje krycie, ale czy obsługuje ona transformacje CSS3?
$(element).animate({
opacity: 0.25,
MozTransform: 'rotate(-' + -amount + 'deg)',
transform: 'rotate(' + -amount + 'deg)'
});
Odpowiedzi:
O ile wiem, podstawowe animacje nie mogą animować nienumerycznych właściwości CSS.
Uważam, że można to zrobić za pomocą funkcji step i odpowiedniej transformacji css3 dla przeglądarki użytkowników. Transformacja CSS3 jest nieco trudna do objęcia wszystkich przeglądarek (na przykład IE6 musisz użyć filtru Matrix).
EDYCJA : oto przykład, który działa w przeglądarkach webkit (Chrome, Safari): http://jsfiddle.net/ryleyb/ERRmd/
Jeśli chcesz obsługiwać tylko IE9, możesz użyć
transform
zamiast-webkit-transform
lub-moz-transform
obsługiwać FireFox.Użyta sztuczka polega na animowaniu właściwości CSS, na której nie zależy nam (
text-indent
), a następnie użyciu jej wartości w funkcji step do wykonania rotacji:$('#foo').animate( .. step: function(now,fx) { $(this).css('-webkit-transform','rotate('+now+'deg)'); } ...
źródło
jQuery
podczastransform
logowania, sprawdź moje rozwiązanie.Odpowiedź Ryleya jest świetna, ale element zawiera tekst. Aby obrócić tekst wraz ze wszystkim innym, użyłem właściwości border-spacing zamiast text-indent.
Aby nieco wyjaśnić, w stylu elementu ustaw początkową wartość:
#foo { border-spacing: 0px; }
Następnie w animowanym fragmencie ostateczna wartość:
$('#foo').animate({ borderSpacing: -90 }, { step: function(now,fx) { $(this).css('transform','rotate('+now+'deg)'); }, duration:'slow' },'linear');
W moim przypadku obraca się o 90 stopni w kierunku przeciwnym do ruchu wskazówek zegara.
Oto demo na żywo .
źródło
Moim zdaniem jQuery
animate
jest nieco nadużywany w porównaniu do CSS3transition
, który wykonuje taką animację na dowolnej właściwości 2D lub 3D. Obawiam się również, że pozostawienie tego przeglądarce i zapomnienie o warstwie o nazwie JavaScript może doprowadzić do zaoszczędzenia mocy procesora - szczególnie, gdy chcesz się bawić animacjami. Dlatego lubię mieć animacje, w których są definicje stylów, ponieważ definiuje się funkcjonalność za pomocą JavaScript . Im więcej prezentacji wprowadzisz do JavaScript, tym więcej problemów napotkasz później.Wszystko, co musisz zrobić, to użyć
addClass
elementu, który chcesz animować, gdzie ustawiasz klasę, która matransition
właściwości CSS . Po prostu „aktywujesz” animację , która pozostaje zaimplementowana na warstwie czystej prezentacji ..js
// with jQuery $("#element").addClass("Animate"); // without jQuery library document.getElementById("element").className += "Animate";
Można łatwo usunąć klasę za pomocą jQuery lub usunąć klasę bez biblioteki .
.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 w większości przypadków użycia.
Używam tego również, gdy chcę zaimplementować inny styl (alternatywne właściwości CSS) i chcę zmienić styl w locie za pomocą globalnej animacji .5s. Dodaję nową klasę do pliku
BODY
, mając alternatywny CSS w takiej postaci:.js
$("BODY").addClass("Alternative");
.css
BODY.Alternative #element{ color : blue; transition : .5s linear; }
W ten sposób możesz zastosować różne style z animacjami, bez ładowania różnych plików CSS. Używasz JavaScript tylko do ustawienia pliku
class
.źródło
transition
, z pewnością nie będzie również obsługiwać twoich przekształceń.transform
jest obsługiwane przez IE9. Ale zgadzam się, że nie jest to największa grupa użytkowników, z której można się poddać (IE8).Aby dodać do odpowiedzi Ryley i atonyc, w rzeczywistości nie musisz używać prawdziwej właściwości CSS, takiej jak
text-index
lubborder-spacing
, ale zamiast tego możesz określić fałszywą właściwość CSS, taką jakrotation
lubmy-awesome-property
. Dobrym pomysłem może być użycie czegoś, co nie grozi, że stanie się rzeczywistą właściwością CSS w przyszłości.Ktoś również zapytał, jak animować inne rzeczy w tym samym czasie. Można to zrobić jak zwykle, ale pamiętaj, że
step
funkcja jest wywoływana dla każdej animowanej właściwości, więc będziesz musiał sprawdzić swoją właściwość, na przykład:$('#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 z dokumentacją animacji jest link do http://api.jquery.com/Types#Tween, który jest sekcją, która nie Wygląda na to, że istnieje. Możesz znaleźć kod prototypu Tween na Github tutaj ).
źródło
now
zależy od tego.myRotationProperty
to coś niestandardowego, wymyślona, „fałszywa” właściwość CSS.now
jest pierwszym argumentem funkcji zwrotnej kroku, określającym zmianę wartości właściwości w tym kroku.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ę,
setTimeout
aby usunąćtransition
właściwość css po zakończeniu animacji (500 ms)Dla czytelności pominąłem prefiksy dostawców.
To rozwiązanie wymaga oczywiście obsługi przejścia przeglądarki.
źródło
Natknąłem się na ten post, szukając użycia transformacji CSS w jQuery do nieskończonej animacji pętli. Ten działał dobrze dla mnie. Nie wiem jednak, jakie to profesjonalne.
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)
źródło
//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'); }
źródło