Вращение элемента анимации

Как я могу повернуть элемент с помощью .animate() jQuery? Я использую приведенную ниже строку, которая в настоящее время правильно анимирует непрозрачность, но поддерживает ли это 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 ), а затем использовать его значение в функции шага для выполнения вращения:

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

Ответ Рэйли велик, но у меня есть текст внутри элемента. Чтобы повернуть текст вместе со всем остальным, я использовал свойство 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 gradleусов против часовой стрелки.

Вот живая демонстрация .

На мой взгляд, анимация jQuery немного переоценивается по сравнению с transition CSS3, который выполняет такую ​​анимацию в любом 2D или 3D-объекте. Кроме того, я боюсь, что оставить его в браузере и забыть слой под названием JavaScript может привести к запасному соку центрального процессора – особенно, когда вы хотите взорвать анимацию. Таким образом, мне нравятся анимации, в которых существуют определения стиля, поскольку вы определяете функциональность с помощью JavaScript . Чем больше презентаций вы введете в JavaScript, тем больше проблем вы столкнетесь позже.

Все, что вам нужно сделать, это использовать addClass для элемента, который вы хотите оживить, где вы устанавливаете class с свойствами transition CSS. Вы просто «активируете» анимацию , которая остается на чистом уровне презентации .

.js

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

Можно легко удалить class с помощью jQuery или удалить class без библиотеки .

.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

  Text  

Это быстрое и удобное решение для большинства случаев использования.

Я также использую это, когда хочу реализовать другой стиль (альтернативные свойства CSS) и хочу изменить стиль «на лету» с помощью глобальной анимации .5s. Я добавляю новый class в BODY , имея альтернативный CSS в форме:

.js

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

.css

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

Таким образом, вы можете применять различные стили с анимацией, не загружая разные файлы CSS. Для установки class используется только JavaScript.

Чтобы добавить к ответам 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 удаляет свойство css transition после окончания анимации (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'); } 
  • Как сделать это преобразование изображения?
  • Виджет «flip» в Core Animation / Cocoa
  • Interesting Posts

    Есть ли способ получить коллекцию всех моделей в вашем приложении Rails?

    Перенаправление неавторизованного controllerа в ASP.NET MVC

    Как хранить изображения в вашей файловой системе

    Существуют ли какие-либо соглашения по упорядочению методов Java?

    Есть ли способ сделать частичную загрузку AngularJS вначале, а не в случае необходимости?

    Как остановить Windows 8 от приглушения запущенных приложений?

    Как настроить HttpContent для второго параметра HttpClient PostAsync?

    Как обеспечить анимацию при вызове другой активности в Android?

    Explorer.exe сбой при нажатии правой кнопкой мыши на файл .ts

    Существуют ли генераторы случайных чисел без гражданства?

    Сериализация анонимных делегатов в C #

    Создание фильма из серии сюжетов в R

    В Excel 2010, как я могу создать шаблон с функцией, автоматически заканчивается в последней ячейке с данными?

    Как отключить определенное предупреждение JavaScript

    Android java.exe закончил с ненулевым значением выхода 1

    Давайте будем гением компьютера.