web-dev-qa-db-ja.com

jQueryは-webkit-transformをアニメーション化します

JQueryを使用してWebkittranslate3dをアニメーション化することは可能ですか？

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

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

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

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

javascriptjquerycsscss3jquery-animate
8
user2440843

_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)を削除することもできます。

[〜＃〜] jsfiddle [〜＃〜]

有用なプロパティの変更を避けるために、そこに任意のプロパティを与えることができます。以下の例を参照してください。

_$(".test").animate({ whyNotToUseANonExistingProperty: 100 }, {
    step: function(now,fx) {
        $(this).css('-webkit-transform',"translate3d(0px, " + now + "px, 0px)");
    },
    duration:'slow'
},'linear');
_

[〜＃〜] jsfiddle [〜＃〜]

そして、私はFirefoxのファンなので、Firefoxの互換性も実装してください。たとえば、 here ：

_$(this).css('-moz-transform',"translate3d(0px, " + now + "px, 0px)");
_
21
Ionică Bizău

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

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

$("#main-nav").transition({ "-webkit-transform": "translate3d(0px, " + e + "px, 0px) scale(1)" });
5
Apqu

これを行うには、任意の値をアニメーション化し、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);
  }
}
);
1
rb-