CSS'deki dönüşümler nasıl birleştirilir?

Question

Geçerli konumuna göre hareket etmek için dönüştürmeler kullanan bir CSS animasyonu var.

CSS

fish { 
    animation: fishanimation 4s ease-in-out infinite alternate; 
} 

@keyframes fishanimation { 
    0% { 
    transform: translateY(20px); 
    } 

    100% { 
    transform: translateY(80px); 
    } 
} 

Şimdi dinamik javascript kullanarak ölçek ve rotasyon ayarlamak istiyorum ama bu çalışan css animasyon tarafından üzerine alır. dönüşümler kombine edilmez :(

Javascript

this.div.style.transform = "scale(0.4) rotate(45deg)"; 

mümkün ölçek ve rotasyon mevcut dönüşüm için geçerli olması mı bir şey gibi:?

element.transform = element.transform + "scale(0.4) rotate(34deg)"; 

DÜZENLEME:

Bu sorunun bir kopyası değil: how to combine css transforms. Bir öğenin zaten üzerine yazmak istemediğim bir dönüşümü olabilir. Aslında mevcut dönüşüm durumunun ne olduğunu bilmeden buna eklemek istiyorum. yorumladığı gibi

Answer 1

, Bunu için bir animasyon kütüphanesi kullanmak tavsiye iyi bir örnek Velocity JS olduğunu. ** Click for Velocity JS website.

önerilen gibi bir kütüphane, bir seçenek değilse, o zaman okumak üzerinde!

Önceki dönüşümlerinizin üst kısmında birden fazla dönüşüm yapmak istiyorsanız, dönüşüm için matrix değerini kullanmanız gerekir. Matris ile ilgili işler biraz karmaşıklaşır. matris için parametreler bu sırada şunlardır: -:

fish { 
    animation: fishanimation 4s ease-in-out infinite alternate; 
} 

@keyframes fishanimation { 
    0% { 
    transform: matrix(1, 0, 0, 1, 0, 20); 
    } 

    100% { 
    transform: matrix(1, 0, 0, 1, 0, 80); 
    } 
} 

dinamik JavaScript Bunu değiştirmek için gerektirecektir bazı -

matrix(scaleX(),skewY(),skewX(),scaleY(),translateX(),translateY()); 

en Bahsettiğiniz ilk balık animasyon ile başlamaya örnek verelim hoş olmayan dize manipülasyonu ve elementin dönüşüm özelliğini elde etme (ki düşündüğünüzden daha garip). İşte bunu nasıl yapabileceğinize dair bir örnek.

function getTransformValues(obj) { 
    var transform = { 
     scaleX: 1, 
     skewX: 0, 
     skewY: 0, 
     scaleY: 1, 
     translateX: 0, 
     translateY: 0 
    }; 

    var matrix = obj.css("-webkit-transform") || 
       obj.css("-moz-transform") || 
       obj.css("-ms-transform")  || 
       obj.css("-o-transform")  || 
       obj.css("transform"); 

    if (matrix && matrix !== 'none') { 
     var values = matrix.split('(')[1].split(')')[0].split(','); 
     transform.scaleX = parseFloat(values[0]); 
     transform.skewY = parseFloat(values[1]); 
     transform.skewX = parseFloat(values[2]); 
     transform.scaleY = parseFloat(values[3]); 
     transform.translateX = parseFloat(values[4]); 
     transform.translateY = parseFloat(values[5]); 
    } 

    return transform; 
} 

var values = getTransformValues($('#test')); 
console.log(values); 
// Object {scaleX: 1, skewX: 0, skewY: 0, scaleY: 2, translateX: 50, translateY: 40} 

Şimdi örneğin, sadece istediğiniz birini değiştirerek yeni bir matris oluşturmaya başlayabilirsiniz bu değerleri var: -

var old = { 
    scaleX: 1, 
    skewX: 0, 
    skewY: 0, 
    scaleY: 2, 
    translateX: 50, 
    translateY: 40 
}; 

$('#test').css('transform', 'matrix(' + old.scaleX + ', ' + old.skewY + ', ' + old.skewX + ', ' + old.scaleY + ', ' + old.translateX + ', ' + old.translateY + ')'); 

Çıplak benimle ... İsterseniz olsun daha da karmaşık olan döndürme açısını manipüle etmeye başlayın. Bu cevap çok bogging önlemek için, sorunun bu kısmının aşağıdaki bağlantıda bir çözümü vardır: Böyle Hız JS, yazma sırasında en az olarak kütüphaneleri benimseyerek neden Get element -moz-transform:rotate value in jQuery

Umarım görebilirsiniz vardır hızlı, kolay, temiz ve pürüzsüz çapraz tarayıcı animasyon için gitmek için en iyi yol.