Wie kombiniert man Transformationen in CSS?

Question

Ich habe eine CSS-Animation, die Transformationen verwendet, um sich relativ zu ihrer aktuellen Position zu bewegen.

CSS

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

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

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

Jetzt mag ich die Skalierung und Rotation dynamisch Javascript anpassen verwenden, aber das durch die laufende CSS-Animation überschrieben wird. Die Transformationen werden nicht kombiniert :(

Javascript

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

Ist es möglich, die Skalierung und Rotation gelten für die bereits bestehenden Transformation so etwas wie:

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

EDIT:

Dies ist kein Duplikat der Frage: how to combine css transforms.Der Punkt dieser Frage ist dass ein Element möglicherweise bereits eine Transformation hat, die ich nicht überschreiben möchte. Ich möchte hinzufügen, ohne zu wissen, was der aktuelle Transformationszustand ist.

Answer 1

Wie kommentierte ich empfehlen Ihnen, eine Animation Bibliothek für dieses, ist ein gutes Beispiel Geschwindigkeit JS. ** Click for Velocity JS website.

Wenn eine Bibliothek wie vorgeschlagen keine Option ist, dann lesen auf!

Wenn Sie mehrere Transformationen wie diese in einer über Ihren früheren Transformationen durchführen möchten, müssen Sie den Wert matrix für die Transformation verwenden. Die Dinge werden mit der Matrix etwas kompliziert. Die Parameter für die Matrix sind in dieser Reihenfolge: -

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

das Beispiel Anfahren mit der ursprünglichen Fisch Animation verwenden Lassen Sie erwähnt: -

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

Um diese dynamisch in JavaScript ändern wird einige erfordern unangenehme String-Manipulation und die Transform-Eigenschaft des Elements (was unangenehmer ist, als Sie denken). Hier ist ein Beispiel, wie Sie es tun könnten.

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} 

Jetzt haben Sie diese Werte bekam man nur die Änderung der man eine neue Matrix zu schaffen beginnen können Sie zum Beispiel wollen: -

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

Bare mit mir ... Wenn Sie wollen Beginnen Sie, den Drehwinkel zu manipulieren Dinge bekommen noch komplizierter. Um dies zu vermeiden Antwort bogging so viel, dieser Teil der Frage eine Lösung hat unter folgendem Link: Get element -moz-transform:rotate value in jQuery

Hoffentlich können Sie sehen, warum Bibliotheken wie Geschwindigkeit JS Annahme, zumindest zum Zeitpunkt des Schreibens ist die Der beste Weg für eine schnelle, einfache, saubere und reibungslose browserübergreifende Animation.