11

ルールの組み合わせを使用して、transition可能な限りクロスブラウザ互換の方法でCSS3ルールを実現しています。、、、、およびを使用していtransitionます。-webkit-transition-moz-transition-o-transition

-ms-transitionInternet Explorerのどのバージョンにも同様のプロパティがありますか？IE 6-8の不透明度に対して次のルールがどのように機能するかと同様に、古いバージョンのIE用の独自のフィルターはありますか？

/* IE 8 */ 
-ms-filter: "progid:DXImageTransform.Microsoft. Alpha(Opacity=50)"; 
/* IE 5-7 */ 
filter: alpha(opacity=50);
4

5 に答える 5

12

古いバージョンの IE には、トランジション効果はありません。

それに近いものを得るために私が知っている唯一の方法は、IEのすべてのバージョンで実際に機能するJQueryのfadeIn()およびメソッドを使用することです。fadeOut()

ただし、悪名高い IE の不透明度処理の悪さにはまだ反抗していることに注意する必要があります。JQuery のフェード効果は、IE6-8 で使用すると、特にグラフィックを含むブロックをフェードする場合に、奇妙な不具合が発生する可能性があります。

試してみることにした場合、コードは非常に単純です。ヘッダーに JQuery を含めるだけで、次のようになります。

$('#myelement').fadeIn();

適切な場所で。

詳細については、JQuery FadeIn のマニュアル ページを参照してください。

もちろん、これは CSS トランジション効果の代わりになります。それはすべて Javascript を介して行われ、おそらく CSS3 トランジションを破棄する必要があります。そうしないと、JQuery 効果と衝突します。しかし、IE で動作させたい場合は、その代償を払う必要があります。

そして、私が言うように、不具合に気をつけてください。テストして、どのように見えるかを確認してください。

これが唯一の方法なので、IE でトランジション効果が本当に必要な場合は、それを行う必要がありますが、見栄えがよくない可能性があることを受け入れる準備をしてください。

Mootools や Dojo などの他の Javascript ライブラリでも同様の効果が得られる可能性がありますが、それらのライブラリに同様の効果があったとしても、同じ問題に悩まされることになると思います。

于 2011-07-01T11:48:00.783 に答える
5

同じ質問を調査しているときにこれに遭遇しました：http://www.useragentman.com/blog/csssandpaper-a-css3-javascript-library/

また、CSS3 トランジションと一緒に使用できる move.js というライブラリも見つけました: https://github.com/visionmedia/move.js

お役に立てれば。

于 2012-06-12T00:26:54.290 に答える
3

IE10 には CSS3 トランジションが含まれますが、それまでは JavaScript を使用する必要があります。

于 2011-07-01T12:41:25.760 に答える
0

IE < 10 の場合、私が個人的に試したことのないもののいずれかを試すことができますが、有望に見え ます http://www.useragentman.com/blog/csssandpaper-a-css3-javascript-library/または http://addyosmani.com /blog/css3transitions-jquery/ (リンク切れ)

于 2013-10-03T08:31:23.580 に答える
0

CSS3 トランジション ルールおよびその他の CSS3 ルールは IE 10 で正常に機能します。プレフィックス「-ms-」は不要になりましたが、引き続き認識されます。将来の互換性を確保するために、遷移プロパティを持つ Microsoft ベンダー プレフィックスを使用するアプリケーションは、それに応じて更新する必要があります。そのため、CSS コードを更新し、プレフィックスなしでルール付きの行を追加します。

于 2013-01-16T15:04:18.130 に答える