jQueryを使用してtranslate3dをアニメートしてスケールしますか？

Question

私はオブジェクトとそのスケールの3D変換を異なる値に同時に編集するcssコマンドを持っています。

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

これは素晴らしい作品が、それは瞬時に起こる、私はあなたが幅と高さをアニメーション化する方法と同様にjqueryのを使用して、それをアニメーション化します。ですから、私がSOで見ている解決策はこれのバリエーションです。

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

ここで、borderSpacingは0に設定された値で、最終目標は-90であり、ステップしてゆっくりと回転します。しかし、これは1つの変数に対してのみ有効です.3つの全く異なる変数がある場合、これを行うことは可能でしょうか？もしそうなら、どのように？前述の解決策では、ステッピングは最終目標に向かっていくらかの段階的な段階である変数を作成しますが、3つの独立した変数がある場合、これがどのように機能するかはわかりません。

Answer 1

あなたの最良のルートは自分の要素

#foo{ 
    transition: all 700ms linear; 
} 

にCSSルールを適用し、

---

（新しい変換値を適用 ）スクリプトのみの最初の部分を使用することです

.animateの方法では、オブジェクトに複数のプロパティを保持でき、step関数がそれぞれ呼び出されます

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