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

Ответ 1

Насколько я знаю, базовые анимированные объекты не могут анимировать нечисловые свойства 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)'); 
}
...

Ответ 2

Ответ на 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 градусов против часовой стрелки.

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

Ответ 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.

Ответ 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 здесь).

Ответ 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 мс)

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

Это решение требует поддержки перехода от браузера.

Ответ 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)

Ответ 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');
            }