2

私は、CSS3トランジションがFirefoxとChromeまたはSafariで異なる動作をする場合があります。この例はhttp://jsfiddle.net/inuwan/StKVQ/1/にあります。

わずかに異なる3つの実装がありますが、Firefoxでは2番目の実装(move2)のみが正しく機能します。divを画面の左側に移行し、その内容を変更してから、同じdivを画面の右側から画面の中央に移行しています。

ケース1(move1)の場合-Chrome/Safariでのみ機能します。divトランジションは正しく画面外に残ります。ただし、Firefoxでは、divを画面の中央に戻すと、スライドインせず、単に表示されるだけです。

ケース2(move2)-要素が画面外の右から左に遷移するようにcssクラスを削除したコードは、ケース1ではインラインでした。ケース2では、そのコードは2秒の追加のsetTimeoutでラップされています。遅れ。Firefox、Chrome、Safariで動作するようになりました。

ケース3(move3)-ケース2と同じですが、document.body.style.overflowX ='hidden'を追加して、divを遷移するときに水平スクロールバーが表示されず、変化しないようにします。これにより、画面外に残されたdivの遷移がFirefoxでスライドせず、divが単に消えます。

違いの背後にある理由はありますか、それともあなたが注意しなければならないそれらの風変わりなことの1つにすぎませんか?

4

0 に答える 0