JQueryを使用してWebkittranslate3dをアニメーション化することは可能ですか?
JQueryのanimateプロパティを使用する場合、cssプロパティをキャメルケースにする必要があることを読みましたが、translate3dの場合、これは機能しないようです。
すぐに発生するのではなく、アニメーション化したい次のコードがありますか?
$("#main-nav").css('-webkit-transform', "translate3d(0px, " + e + "px, 0px) scale(1)");
明確にするために、「e」は、上記のコードが実行される関数に渡される変数です。
_text-indent
_を使用すると、機能します。例:
_$(".test").animate({ textIndent: 100 }, {
step: function(now,fx) {
$(this).css('-webkit-transform',"translate3d(0px, " + now + "px, 0px)");
},
duration:'slow'
},'linear');
_
また、_-webkit-transform
_からscale(1)
を削除することもできます。
有用なプロパティの変更を避けるために、そこに任意のプロパティを与えることができます。以下の例を参照してください。
_$(".test").animate({ whyNotToUseANonExistingProperty: 100 }, {
step: function(now,fx) {
$(this).css('-webkit-transform',"translate3d(0px, " + now + "px, 0px)");
},
duration:'slow'
},'linear');
_
そして、私はFirefoxのファンなので、Firefoxの互換性も実装してください。たとえば、 here :
_$(this).css('-moz-transform',"translate3d(0px, " + now + "px, 0px)");
_
JQueryがネイティブにサポートしていないプロパティをアニメーション化しようとしている可能性があると思います。おそらく、次のようなプラグインを使用するのが最善の策です。 http://ricostacruz.com/jquery.transit/
次に.animate関数を使用する代わりに、次のような.transitionを使用します。
$("#main-nav").transition({ "-webkit-transform": "translate3d(0px, " + e + "px, 0px) scale(1)" });
これを行うには、任意の値をアニメーション化し、step
コールバックを使用して、単純なメソッドに記述したCSSを適用します。おそらく何人かの専門家はこれが良いか悪いかについてチャイムを鳴らすことができますが、それは私にとってはうまくいき、追加のプラグインをインストールすることを強制しません。これが例です。
この例では、100pxの変換を適用してから、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);
}
}
);