Анимировать элемент transform rotate

Question

Как бы я повернул элемент с помощью jQuery's .animate()? Я использую строку ниже, которая в настоящее время правильно анимирует прозрачность, но поддерживает ли это преобразования CSS3?

$(element).animate({
   opacity: 0.25,
   MozTransform: 'rotate(-' + -amount + 'deg)',
   transform: 'rotate(' + -amount + 'deg)'
});

Answer 1

Насколько я знаю, базовая анимация не может анимировать нечисловые свойства CSS.

Я полагаю, что вы могли бы сделать это, используя функцию step и соответствующее преобразование css3 длябраузер пользователей.CSS3-преобразование немного сложнее, чтобы охватить все ваши браузеры (например, в IE6 вам необходимо использовать матричный фильтр).

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)'); 
}
...

Answer 2

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

Вот демоверсия .

Answer 3

На мой взгляд, 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.

Answer 4

Чтобы добавить к ответам 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 здесь ).

Answer 5

Просто используйте CSS-переходы:

$(element).css( { transition: "transform 0.5s",
                  transform:  "rotate(" + amount + "deg)" } );

setTimeout( function() { $(element).css( { transition: "none" } ) }, 500 );

В качестве примера я установил продолжительность анимации на 0,5 секунды.

Обратите внимание на setTimeout для удаления свойства transition css после окончания анимации (500 мс)

---

Для удобства чтения я опустил префиксы поставщиков.

Для этого решения требуется поддержка перехода браузера без курса.

Answer 6

Я наткнулся на этот пост, пытаясь использовать 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)

Answer 7

//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');
            }