[jQuery] アニメーションに CSS3を 使って 性能を 高めて 与える プラグイン – jquery.animate-enhanced plugin
CSS3には アニメーション 関した 效果たちが 追加された. そして 最新 ブラウザーたちは これを 支援する.
ウェブで アニメーションは 性能と 連関される. モバイルでは 特に そうだ. ところが 運が良くも, 仮装(家長) 多い 人々が 使う アイフォーンは CSS3を 支援する. そうだったら jQuery アニメーションを 使う 時, CSS3を 支援する 場合には CSS3を 使うように すれば 良いでしょう ないか?
それを 具現した プラグインが ある. ところで, jquery.animate-enhanced plugin 載せる.
使い方は あまりにも 簡単だ. js ファイルを ダウンして, そのまま script タグで 入れて 与える. それでは 終りだ. そうに すれば 分かって jQuery animate 関数を 確張する. そのため CSS3を 支援する ブラウザーの 場合には CSS3を 使って, そうなの ない 場合には そのまま js アニメーションを 使うように する. たいてい 節で 最高だ.
また, jQuery義 slideDown, slideUp, fadeIn, fadeOut ような 関数たちは 内部的に animate 関数を 使うので これ プラグインを 適用すれば 自動で 私 関数たちも 拡張されると 見れば なる.
animate 関数に 追加される オプション
これ プラグインを 使えば animate 関数に 次 歳 オプションを 追加で 使う 数 ある. これだけ 分かれば これ プラグイン 使い方は だ 分かる のだ.
使い方
使い方は jQuery animate() 関数わ ようだ. するが 3枝 鳥 パラメーターが 追加される. これ パラメーターたちは 皆 選択値で, 一般的には 触れるの なくても 誰 問題が ない.
- avoidTransforms: (Boolean)
基本的に プラグインは leftわ top 位置を CSS3 スタイルの -webkit-transform( あるいは 彼に あたる の)で 変更する. ハードウェア 加速を 使うこと ためだ. これ オプションを true路 すれば そうに 夏至 ないように なる. - useTranslate3d: (Boolean)
基本的に これ プラグインは 2d translationを 使う. もっと 多い ブラウザーが これを 支援すること だからだ. translate3dを true路 おけば そうに 夏至 ない. アイフォーン/アイパッド 開発の時 お勧めする. (理由を 分かって たければ クリック) - leaveTransforms: (Boolean)
基本的に これ プラグインは アニメーションが 起きる 時 left私 top プロパティーを 使うように なれば, (上の オプションに よって 2d私 3d路) CSS3 transform義 translate 效果を 使うように なる. ところが もし 動く 奴が 違う レイアウトに 従属的なら, 転換 效果が 終わった 次, これ 値段たちを とり除いて 元々の leftわ top 値段で 作る. これを true路 おけば これ 機能を 使うの ないように なる.
この程度 説明なら 十分な ことと 思う. 事実 私は 下の 歳 オプションは 使う 仕事が ない の ようだ. そのまま script タグに 入れて 終わらせた. 性能が まどろみ 向上した の ようで 良い.
- コメント機能はありません。コメントの代わりに[email protected]
にメールを送ってください。