Animate translate3d und skalieren mit jquery?

Question

So habe ich einen CSS-Befehl, der die 3D-Übersetzung eines Objekts und seine Skalierung gleichzeitig auf verschiedene Werte bearbeitet.

_this.css('-webkit-transform', 'translate3d('+X+'px, '+Y+'px, 0) scale('+scaleFactor+', '+scaleFactor+')'); 

Dies funktioniert gut, aber es passiert sofort, ich will es animieren jquery mit ähnlich, wie Sie Breite und Höhe animieren. Die Lösung, die ich auf SO sehe, ist eine Variation davon.

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

Wo BorderSpacing einige Werte auf 0, das Endziel wäre -90 und es würde drehen Schritt und langsam eingestellt sind. aber das funktioniert nur für eine Variable ist das möglich, wenn ich 3 völlig verschiedene Variablen habe? und wenn ja wie? In der oben erwähnten Lösung erzeugt das Stepping eine nun Variable, die ein inkrementeller Schritt in Richtung des Endziels ist, aber wenn ich 3 unabhängige Variablen habe, bin ich nicht sicher, wie dies funktionieren könnte.

Answer 1

Sie beste Route wäre, nur

#foo{ 
    transition: all 700ms linear; 
} 

und verwenden Sie den ersten Teil des Skripts nur eine CSS-Regel auf Ihrem Element anwenden (, wo Sie die neuen Werte Transformation anwenden)

---

Wenn Sie die .animate Weg gehen müssen, dann kann das Objekt mehr als eine Eigenschaften enthalten und die step Funktion wird für jede

aufgerufen werden

$('#foo').animate({ borderSpacing: -90, otherProp: 80 }, { 
    step: function(now,fx) { 
     switch(fx.prop){ 
      case 'borderSpacing': 
       $(this).css('transform','rotate('+now+'deg)'); 
       break; 
      case 'otherProp': 
       $(this).css('something else', now); 
       break; 
     } 
    }, 
    duration:'slow' 
},'linear');