2

私はすべてのプロジェクトでこの問題に遭遇し、この時点で質問するのに十分うんざりしています。

フェードインなどに比べて素晴らしく滑らかであるため、フェードアニメーションに css3 を使用したいと考えています。

問題は、99% の確率で、最初に設定されているものにフェードインしていることですdisplay:none;(つまり、opacity: 0開始時に設定して、jQuery で変更するopacity: 1だけでは十分ではありません。

たとえば、私のドラッグ アンド ドロップ機能では、絶対配置の div:#dropzoneがあり、明らかにアプリ全体をカバーすることはできません (ただし、常に不透明度をゼロに設定するだけです)。

追加しようとする$('#dropzone').show().css('opacity',1)と、フェードはありません。

それが終了すると.show()、まだ設定されていますopacity 0（すぐに停止しても何も表示されないため、display:blockwithに設定されてopacity: 0います）-すでに適切な css3transitionプロパティがあるため、その時点でアニメーション化されないのはなぜですか当たる.css()？

これは私をとても悩ませています。これを修正するか、適切な方法を知りたいです。

ありがとう

http://jsfiddle.net/fPtU5

追加されたjsfiddleを編集

4

3 に答える 3

1

この記事の助けを借りてそれを理解しました：http://www.greywyvern.com/?post=337#

.dropzone {
    visibility:hidden;
    opacity:0;
    background: rgba(0,0,0,.85);
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
  -webkit-transition: visibility 0s ease-in-out .2s, opacity .2s ease-in-out;
   -moz-transition: visibility 0s ease-in-out .2s, opacity .2s ease-in-out;
    -ms-transition: visibility 0s ease-in-out .2s, opacity .2s ease-in-out;
     -o-transition: visibility 0s ease-in-out .2s, opacity .2s ease-in-out;
        transition: visibility 0s ease-in-out .2s, opacity .2s ease-in-out; 
}  

.opaque {
    visibility:visible;
    opacity:1;
    transition-delay:0s;
}

そして、フェードイン/アウトをトリガーしたい場合は、このクラスを追加/削除します

$('.dropzone').addClass('opaque');

于 2012-11-10T05:53:35.307 に答える
1

表示プロパティが css アニメーションをホースで処理する理由はわかりませんが、元のフィドルに対する興味深い観察/変更がいくつかあります。http://jsfiddle.net/5RF5A/。ディスプレイをブロックに設定してから不透明度を 1 に設定するまでのわずかなミリ秒の遅延でも、css アニメーションが機能します。

CSSを使用して不透明度をアニメーション化しようとすると、常にこの問題に遭遇しますが、同時にdisplay:noneドキュメントフローから要素を取り出す必要があります。私は通常、display:none の代わりに position:absolute または height/width:0 または visibility:hidden (不透明度が 0 の場合) を追加して、不透明度をアニメーション化できるようにします。

私の推測では、(そして、この後でいくつかの調査を行うのに十分興味があります)、これはある種のブラウザーのリフロー/再描画のことです。かなり離れているかもしれませんが、そこから探し始めます

編集:ディスプレイにトランジションが見つかりました: プロパティ。問題に対するいくつかの非常に良い回答/洞察があります。

于 2012-11-10T06:02:13.390 に答える
0

少し試してみたところ、プラグインを使用して動作するようになり、プラグインなしでコードが実際に動作することに気付きました。明らかにトランジションを使用しているようです。

JSFiddle

$('a').click(function(){
    $('div').show().animate({'opacity':1});
});
于 2012-11-10T05:33:40.200 に答える