Как мне повернуть элемент с помощью jQuery .animate()
? Я использую строку ниже, которая в настоящее время правильно анимирует непрозрачность, но поддерживает ли она преобразования CSS3?
$(element).animate({
opacity: 0.25,
MozTransform: 'rotate(-' + -amount + 'deg)',
transform: 'rotate(' + -amount + 'deg)'
});
Ответы:
Насколько мне известно, базовые анимации не могут анимировать нечисловые свойства CSS.
Я считаю, что вы могли бы сделать это, используя пошаговую функцию и соответствующее преобразование css3 для браузера пользователя. Преобразование CSS3 немного сложно охватить все ваши браузеры (например, в IE6 вам нужно использовать фильтр Matrix).
EDIT : вот пример, который работает в браузерах webkit (Chrome, Safari): http://jsfiddle.net/ryleyb/ERRmd/
Если вы хотите поддерживать только IE9, вы можете использовать
transform
вместо него-webkit-transform
или-moz-transform
поддерживать FireFox.Используемый трюк состоит в том, чтобы анимировать свойство CSS, которое нам не важно (
text-indent
), а затем использовать его значение в функции step для вращения:$('#foo').animate( .. step: function(now,fx) { $(this).css('-webkit-transform','rotate('+now+'deg)'); } ...
источник
jQuery
этомtransform
, проверьте мое решение.Ответ Райли отличный, но у меня есть текст внутри элемента. Чтобы повернуть текст вместе со всем остальным, я использовал свойство border-spacing вместо text-indent.
Также, чтобы немного уточнить, в стиле элемента установите начальное значение:
#foo { border-spacing: 0px; }
Затем в анимированном фрагменте ваше окончательное значение:
$('#foo').animate({ borderSpacing: -90 }, { step: function(now,fx) { $(this).css('transform','rotate('+now+'deg)'); }, duration:'slow' },'linear');
В моем случае он вращается на 90 градусов против часовой стрелки.
Вот живая демонстрация .
источник
На мой взгляд, jQuery
animate
используется слишком часто по сравнению с CSS3transition
, который выполняет такую анимацию для любого 2D или 3D свойства. Также я боюсь, что если оставить это браузеру и забыть о слое под названием JavaScript, это может привести к экономии ресурсов процессора - особенно, когда вы хотите взорвать анимацию. Таким образом, мне нравится иметь анимацию там, где есть определения стилей, поскольку вы определяете функциональность с помощью JavaScript. . Чем больше презентаций вы внедрите в JavaScript, тем с большим количеством проблем вы столкнетесь позже.Все, что вам нужно сделать, это использовать
addClass
для элемента, который вы хотите анимировать, где вы устанавливаете класс, имеющийtransition
свойства CSS . Вы просто «активируете» анимацию , которая остается реализованной на чистом уровне представления ..js
// with jQuery $("#element").addClass("Animate"); // without jQuery library document.getElementById("element").className += "Animate";
Можно легко удалить класс с помощью jQuery или удалить класс без библиотеки .
.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>
Это быстрое и удобное решение для большинства случаев использования.
Я также использую это, когда хочу реализовать другой стиль (альтернативные свойства CSS) и хочу изменить стиль на лету с помощью глобальной анимации .5s. Я добавляю новый класс в класс
BODY
, имея альтернативный CSS в такой форме:.js
$("BODY").addClass("Alternative");
.css
BODY.Alternative #element{ color : blue; transition : .5s linear; }
Таким образом, вы можете применять различные стили с анимацией, не загружая разные файлы CSS. Вы используете только JavaScript для установки файла
class
.источник
transition
, он определенно не будет поддерживать ваши преобразования.transform
поддерживается IE9. Но я согласен, что это не самая большая группа пользователей, от которой следует отказаться (IE8).Чтобы добавить к ответам Ryley и atonyc, вам на самом деле не нужно использовать настоящее свойство CSS, например
text-index
илиborder-spacing
, вместо этого вы можете указать поддельное свойство CSS, напримерrotation
илиmy-awesome-property
. Было бы неплохо использовать что-то, что не рискует стать фактическим свойством CSS в будущем.Также кто-то спросил, как анимировать одновременно другие вещи. Это можно сделать как обычно, но помните, что
step
функция вызывается для каждого анимированного свойства, поэтому вам нужно будет проверить свое свойство, например:$('#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)'); } } });
(Примечание: я не могу найти документацию по объекту "Tween" в документации jQuery; на странице документации по анимации есть ссылка на http://api.jquery.com/Types#Tween, в которой нет Кажется, не существует. Вы можете найти код для прототипа Tween на Github здесь ).
источник
now
зависит от этого.myRotationProperty
это что-то нестандартное, выдуманное, "фальшивое" свойство CSS.now
- это первый аргумент функции обратного вызова шага, определяющий изменение значения свойства на этом шаге.Просто используйте переходы CSS:
$(element).css( { transition: "transform 0.5s", transform: "rotate(" + amount + "deg)" } ); setTimeout( function() { $(element).css( { transition: "none" } ) }, 500 );
В качестве примера я установил продолжительность анимации 0,5 секунды.
Обратите внимание на
setTimeout
удалениеtransition
свойства css после завершения анимации (500 мс)Для удобства чтения я опустил префиксы производителей.
Это решение, конечно же, требует поддержки перехода в браузере.
источник
Я наткнулся на этот пост, пытаясь использовать преобразование CSS в jQuery для анимации бесконечного цикла. Этот сработал для меня. Я не знаю, насколько это профессионально.
function progressAnim(e) { var ang = 0; setInterval(function () { ang += 3; e.css({'transition': 'all 0.01s linear', 'transform': 'rotate(' + ang + 'deg)'}); }, 10); }
Пример использования:
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'); }
источник