Как бы повернуть элемент с помощью jQuery .animate()? Я использую приведенную ниже строку, которая в настоящее время правильно анимирует непрозрачность, но поддерживает ли она CSS3?
$(element).animate({
opacity: 0.25,
MozTransform: 'rotate(-' + -amount + 'deg)',
transform: 'rotate(' + -amount + 'deg)'
});
Насколько я знаю, базовые анимированные объекты не могут анимировать нечисловые свойства CSS.
Я считаю, что вы можете сделать это с помощью step и соответствующего преобразования css3 для браузера пользователей. Трансформация CSS3 немного сложна, чтобы охватить все ваши браузеры (например, IE6 вам нужно использовать фильтр Matrix).
EDIT: вот пример, который работает в браузерах webkit (Chrome, Safari): http://jsfiddle.net/ryleyb/ERRmd/ p >
Если вы хотите поддерживать только IE9, вы можете использовать transform вместо -webkit-transform, или -moz-transform будет поддерживать FireFox.
Используемый трюк - это анимировать свойство CSS, которое нам не заботит (text-indent), а затем использовать его значение в шаговой функции для выполнения вращения:
$('#foo').animate(
..
step: function(now,fx) {
$(this).css('-webkit-transform','rotate('+now+'deg)');
}
...
Ответ на Ryley отлично, но у меня есть текст внутри элемента. Чтобы повернуть текст вместе со всем остальным, я использовал свойство 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 немного переоценивается по сравнению с CSS3 transition, который выполняет такую анимацию по любому свойству 2D или 3D. Также я боюсь, что оставив его в браузере и , забыв слой с именем JavaScript, может привести к запасному соку процессора - особенно, когда вы хотите взорвать анимацию. Таким образом, мне нравятся анимации, в которых определены определения стиля, поскольку вы определяете функциональность с помощью JavaScript. Чем больше презентаций вы вводите в JavaScript, тем больше проблем вы столкнетесь позже.
Все, что вам нужно сделать, это использовать addClass для элемента, который вы хотите оживить, где вы устанавливаете класс с CSS transition свойствами. Вы просто "активируете" анимацию, которая остается реализована на чистом уровне представления.
.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.
Чтобы добавить к ответам 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 здесь).
Просто используйте 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');
}