Öğeyi canlandırma dönüşümü döndürme

Bir jQuery ile bir öğeyi nasıl döndürürüm .animate()? Şu anda opaklığı doğru şekilde canlandıran aşağıdaki satırı kullanıyorum, ancak bu CSS3 dönüşümlerini destekliyor mu?

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

Bildiğim kadarıyla, temel animasyonlar sayısal olmayan CSS özelliklerine animasyon uygulayamaz.

Bunu bir adım işlevi ve kullanıcıların tarayıcısı için uygun css3 dönüşümü kullanarak yapabileceğinizi düşünüyorum . CSS3 dönüşümü, tüm tarayıcılarınızı kapsamak için biraz zordur (örneğin, IE6, Matrix filtresini kullanmanız gerekir).

DÜZENLEME : işte webkit tarayıcılarında (Chrome, Safari) çalışan bir örnek: http://jsfiddle.net/ryleyb/ERRmd/

Yalnızca IE9'u desteklemek istiyorsanız , FireFox transformyerine kullanabilir -webkit-transformveya -moz-transformdestekleyebilirsiniz.

Kullanılan numara, umursamadığımız bir CSS özelliğini canlandırmak ( text-indent) ve ardından dönüşü yapmak için bir adım işlevinde değerini kullanmaktır:

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

Ryley'in cevabı harika, ancak öğenin içinde bir metin var. Metni diğer her şeyle birlikte döndürmek için metin girintisi yerine border-spacing özelliğini kullandım.

Ayrıca, biraz açıklığa kavuşturmak için, öğenin tarzında başlangıç ​​değerinizi ayarlayın:

#foo {
    border-spacing: 0px;
}

Ardından animasyon yığınında, nihai değeriniz:

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

Benim durumumda saat yönünün tersine 90 derece dönüyor.

İşte canlı demo .

Bence animatejQuery'ler, transitionherhangi bir 2D veya 3D özellikte bu tür bir animasyonu gerçekleştiren CSS3'e kıyasla biraz fazla kullanılıyor . Ayrıca korkarım ki, tarayıcıya bırakıp JavaScript adlı katmanı unutarak, özellikle animasyonlarla patlama yapmak istediğinizde, yedek CPU suyuna yol açabilir . Bu nedenle, JavaScript ile işlevselliği tanımladığınız için stil tanımlarının olduğu animasyonlara sahip olmayı seviyorum . JavaScript'e ne kadar çok sunum eklerseniz, daha sonra o kadar çok sorunla karşılaşacaksınız.

Yapmanız gereken tek şey, addClassCSS transitionözelliklerine sahip bir sınıf belirlediğiniz, canlandırmak istediğiniz öğeyi kullanmaktır . Sen sadece animasyon "aktive" kalır, saf sunum katmanında uygulanan .

.js

// with jQuery
$("#element").addClass("Animate");

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

JQuery ile bir sınıf kolaylıkla kaldırılabilir veya kitaplık olmadan bir sınıf kaldırılabilir .

.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>

Bu, çoğu kullanım durumu için hızlı ve kullanışlı bir çözümdür.

Bunu, farklı bir stil (alternatif CSS özellikleri) uygulamak istediğimde ve stili anında global bir .5s animasyonuyla değiştirmek istediğimde de kullanıyorum. Şu şekilde bir BODYalternatif CSS'ye sahipken öğesine yeni bir sınıf ekliyorum :

.js

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

.css

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

Bu şekilde, farklı CSS dosyaları yüklemeden animasyonlarla farklı stiller uygulayabilirsiniz. Bir class.

Ryley ve atonyc ait cevaplar eklemek için, aslında gibi gerçek CSS özelliğini kullanmak gerekmez text-indexya border-spacing, ama bunun yerine gibi sahte CSS özelliğini belirtebilir rotationya my-awesome-property. Gelecekte gerçek bir CSS mülkü olma riskini taşımayan bir şey kullanmak iyi bir fikir olabilir.

Ayrıca, biri aynı anda diğer şeyleri nasıl canlandıracağını sordu. Bu her zamanki gibi yapılabilir, ancak stepişlevin her animasyonlu özellik için çağrıldığını unutmayın , bu nedenle mülkünüzü şu şekilde kontrol etmeniz gerekir:

$('#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)');  
            }
        }
    });

(Not: "Tween" nesnesinin belgelerini jQuery belgelerinde bulamıyorum; canlandırma belgeleri sayfasından , http://api.jquery.com/Types#Tween bağlantısı var ki bu bir bölüm Görünüşe göre yok. Tween prototipinin kodunu burada Github'da bulabilirsiniz ).

Sadece CSS geçişlerini kullanın:

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

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

Örnek olarak animasyonun süresini 0,5 saniyeye ayarlıyorum.

Not setTimeoutkaldırmak için transitionanimasyon bittikten sonra CSS özelliği (500 ms)

Okunabilirlik için satıcı öneklerini ihmal ettim.

Bu çözüm, tarayıcının ders dışı geçiş desteğini gerektirir.

Sonsuz bir döngü animasyonu için jQuery'de CSS dönüşümünü kullanmak isteyen bu gönderiye rastladım. Bu benim için iyi çalıştı. Yine de ne kadar profesyonel olduğunu bilmiyorum.

function progressAnim(e) {
    var ang = 0;

    setInterval(function () {
        ang += 3;
        e.css({'transition': 'all 0.01s linear',
        'transform': 'rotate(' + ang + 'deg)'});
    }, 10);
}

Kullanım örneği:

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