Анімація перетворення елемента обертання

Як повернути елемент за допомогою jQuery .animate()? Я використовую рядок нижче, який в даний час правильно анімує непрозорість, але чи підтримує це перетворення CSS3?

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

Наскільки мені відомо, основні анімації не можуть анімувати нечислові властивості CSS.

Я вважаю, що ви можете зробити це за допомогою покрокової функції та відповідного перетворення 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)'); 
}
...

Відповідь Райлі чудова, але у мене є текст всередині елемента. Для того, щоб повертати текст разом із усім іншим, я використав властивість інтервалу меж замість відступу тексту.

Крім того, щоб трохи уточнити, у стилі елемента встановіть своє початкове значення:

#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, як rotationor 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');
            }