web-dev-qa-db-ja.com

IEでCSS3の移行を模倣しますか？

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

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

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

古いバージョンのIEには、いかなる種類の遷移効果もありません。

私が知っている唯一の方法は、JQueryのfadeIn()メソッドとfadeOut()メソッドを使用することです。これらは、IEのすべてのバージョンで実際に機能します。

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

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

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

適切な場所に。

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

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

そして、私が言うように、グリッチに気をつけてください。それをテストして、それがあなたのためにどのように見えるかを見てください。

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

MootoolsやDojoなどの他のJavascriptライブラリにも同様の効果があり、試してみることができますが、それがあれば、同じ問題が発生するでしょう。

12
Spudley

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

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

お役に立てれば。

5
user1429980

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

3
halliewuud

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

0
Generalski

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

0
GiorgosK