ほとんどの人は CSS3 トランジションに精通していると思いますが、私は CSS のシンプルさを備えているため、jQuery アニメーションよりもこちらを好みます。私の唯一の後悔は、IE < 9 (いつものように) だけでなく、Firefox < 4、Safari < 4 などでも動作しないことです。IE のためだけに JavaScript で個別のアニメーションを作成するという意味ではありません。しかし、CSSをスキャンし、アニメーションの速度を取得し、アニメーション化する必要があるプロパティを取得し、それらをアニメーション化するソリューションが必要です(jQueryなどを使用)。私はそれを取得しますか?
4 に答える
どのブラウザー ベンダー プレフィックスをスニッフィングする必要があるかを事前に知っていれば、サポートされている CSS プロパティを検出することができます。メカニズムの要点を書きました:
https://gist.github.com/1096784
cssSandpaper は、CSS を解析し、さまざまな CSS3 効果のポリフィルを動的に実装することを目的とした JS ライブラリです。
http://www.useragentman.com/blog/csssandpaper-a-css3-javascript-library/
逆の順序で動作する jQuery ライブラリもあり、$.animate() を呼び出したときに可能な場合はトランジションを静かに実装します。
残念なことに、ほとんどのブラウザーは、ページをレンダリングするときに、サポートされていない CSS 宣言を削除します。つまり、ブラウザーが特定の CSS 機能をサポートしていない場合、要素のstyle
プロパティを調べて、その機能のスタイルシート エントリを確認することはできません。それはあなたのCSSファイルにありました。
IE はこれに対する例外であり、CSS3Pie のようなポリフィルが機能する理由ですが、他のブラウザーでは削除された CSS 宣言が表示されるとは思えないため、Javascript ソリューションも再作成する必要があります。 CSS ファイル自体をプレーン テキストとしてロードし、機能自体を実際に実装し始める前に再解析します。
これの意味するところは、あなたが求めていることはおそらくブラウザーに負荷がかかりすぎて、努力する価値がないということです (特に、とにかく遅い古いバージョンについて話しているため)。
SOに関するこの質問は、1年以上前にほぼ同じことを尋ねていました。その時も答えはありませんでしたし、今もないと思います。
ただし、回答に記載されている JQuery プラグインは、必要なことを行いますが、逆です (つまり、すべてのブラウザーでスクリプトとして実行する必要がありますが、利用可能な場合はスクリプト内で CSS 機能を使用します)。それがあなたが得ようとしている最も近いものだと思います。
jQueryUIのaddClass/removeClass メソッド(通常ではありません!) は、クラスのプロパティをアニメーション化できます。
var transitionOptions = Modernizr["css3transitions"] ? null : { queue: false, duration: 200, children: false };
$(".selector").addClass("someclass", transitionOptions);
eCSStender を試してみてください: http://ecsstender.org/extensions/css3-transitions/index.html 要素を表示/非表示にする比較的単純なものにこれを使用しました。