Анимировать преобразование элемента, поворот

Как мне повернуть элемент с помощью 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)'); 
}
...

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

Чтобы добавить к ответам 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');
            }