8

jQuery を使用して webkit translate3d をアニメーション化することは可能ですか?

jQuery の animate プロパティを使用する場合、css プロパティをキャメルケースにする必要があることを読みましたが、translate3d の場合、これは機能しないようです。

すぐに実行するのではなく、アニメーション化したい次のコードがありますか?

$("#main-nav").css('-webkit-transform', "translate3d(0px, " + e + "px, 0px) scale(1)");

明確にするために、「e」は、上記のコードが実行される関数に渡される変数です。

4

3 に答える 3

5

jQuery がネイティブにサポートしていないプロパティをアニメーション化しようとしている可能性があると思います。最善の策は、おそらく次のようなプラグインを使用することです: http://ricostacruz.com/jquery.transit/

.animate 関数を使用する代わりに、次のように .transition を使用します。

$("#main-nav").transition({ "-webkit-transform": "translate3d(0px, " + e + "px, 0px) scale(1)" });
于 2013-06-06T09:54:31.790 に答える
1

これを行うには、任意の値をアニメーション化してから、stepコールバックを使用して、単純なメソッドに記述した CSS を適用します。おそらく一部の専門家は、これが良いか悪いかについて意見を述べることができますが、私にとってはうまくいき、追加のプラグインをインストールする必要はありません. これが例です。

この例では、100 ピクセルの変換を適用してから、jQuery.animate()メソッドを使用してそれを 0 に減らします。

var $elem
  , applyEffect
  ;

$elem = $('.some_elements');

applyEffect = function ($e, v) {
  $e.css({
    '-webkit-transform': 'translate3d(0px, ' +String(v)+ 'px, 0px)'
  , '-moz-transform': 'translate3d(0px, ' +String(v)+ 'px, 0px)'
  , 'transform': 'translate3d(0px, ' +String(v)+ 'px, 0px)'
  });
};

applyEffect($elem, 100);

$elem.animate({
  foo: 100
}, {
  duration: 1000
, step: function (v) {
    applyEffect($elem, 100 - v);
  }
}
);
于 2014-10-06T17:59:12.030 に答える