jQuery UI フレームワークと統合するためのプラグイン / プロシージャ / CSS ライン / 別の方法があり、可能な場合はハードウェア アクセラレーションによる遷移を利用できますか。
たとえば、あるサイトでは、ユーザーが対応する矢印をクリックすると、UI フレームワークを使用して画像をスライドインおよびスライドアウトするギャラリーを使用しています。これはできるだけスムーズにしたいです。
jQuery UI フレームワークと統合するためのプラグイン / プロシージャ / CSS ライン / 別の方法があり、可能な場合はハードウェア アクセラレーションによる遷移を利用できますか。
たとえば、あるサイトでは、ユーザーが対応する矢印をクリックすると、UI フレームワークを使用して画像をスライドインおよびスライドアウトするギャラリーを使用しています。これはできるだけスムーズにしたいです。
可能な場合はアニメーションにcssトランジションを使用するjquery-animate-enhancedと呼ばれる非常に便利なjqueryプラグインを見つけました。モバイルWebkitブラウザーでスライディングトランジションが非常に途切れ途切れになるのに問題があり、これは驚異的に機能しました。
jQuery を使用して、ハードウェア アクセラレーションされた css 変換にアクセス/追加できます。ただし、jQueryUI はストック アニメーションに css 変換を使用しません。
これは、css でスライド アニメーションを手動で作成する必要があることを意味します。例、
$("#myDiv").css("-webkit-transform", "translate3d(800px, 0px, 0px)");
//or some other transform type, (this is specifically for webkit)
次に、CSS で、次のようなイージング関数が必要になります。
#mydiv {
-webkit-transition:all 0.5s ease-in-out;
-moz-transition:all 0.5s ease-in-out;
-o-transition:all 0.5s ease-in-out;
-ms-transition:all 0.5s ease-in-out;
transition:all 0.5s ease-in-out;
}
これにより、#myDiv 800px を右に移動するハードウェア アクセラレーションによるトランジションが得られます。