4

実際の例はここで見ることができます。

赤い四角 (表示中) は、緑の四角 (オーバーフローとして非表示) の真上にあります。正方形をクリックすると、両方の色付きの正方形が即座に完全に透明になります。さらに、赤い正方形の高さは 0 に設定されています。これによりトランジションが発生しますが、赤い四角が透明になったためトランジションは見えなくなります。

四角をもう一度クリックする前に、toggle関数を調べてください。JavaScript を見ると、トランジションを発生させることなく、赤い四角の高さが元の値にリセットされることが期待できます。none高さが変更されている間、トランジション プロパティが一時的に に設定されるため、トランジションを抑制する必要があります。

もう一度正方形をクリックします。両方の色付きの正方形は即座に完全に不透明になりますが、赤い正方形は高さが 0 から元の値に移行するにつれて下にスライドします。インライン スタイルによって設定された高さはtoggle、要素が表示されるまで関数によって削除されず、それまでに遷移プロパティもリセットされたかのようです。

リフローをトリガーすると、高さの変更が強制的に適用されるようです。(テストするには、次を含む行のコメントを外しoffsetParentます。) この動作はブラウザー (少なくとも Chrome と Safari、Firefox、および Opera) で発生するため、仕様の一部ではないのではないかと考えています。CSS Transitions Moduleを確認しましたが、成功しませんでした。この動作が発生する理由と、実装全体で一貫している理由はありますか?

4

1 に答える 1

4

これは本当に奇妙な問題です。コードで何か間違ったことをしているとは思いません。現在のブラウザーの実装にはバグがあるだけです。

CSS トランジションでこの種の一見明らかなバグに遭遇したことがあります。ケース、私のWebKitの修正）。

私はこれを深く掘り下げましたが、レイアウト エンジン (WebKit、Gecko、および Presto) をサポートする 3 つの主要なトランジションで機能するクリーンなソリューションを思いつくことができませんでした。とはいえ、ここに私が見つけたものがあります。うまくいけば、私よりも賢い人 (または新鮮な目でこれに来る人) がこの答えを真の解決策に変えることができます.

Gecko と Presto (WebKit は除く)

(私はブラウザー エンジニアでもなく、仕様に精通していません) の現在または以前の値は、transition-property必要かどうかに関係なく引き続きレンダリングされるようです。したがって、 の値を変更してもtransition-property、ブラウザは引き続きバックグラウンドで高さの遷移をレンダリングしており、高さを元に戻すと、その末尾が表示されます。

ただし、解決策があります。JavaScript で作成しtransition(スタイル シートのどこにも配置しないでください)、削除し (その後、DOM のどこにもtransitionルールが適用されません#upper)、高さを変更してから、再度追加します。 . 完璧ではありませんが、バグ依存のハックでもありません。

http://jsfiddle.net/grantheaslip/e3quW/

JavaScript

upper.style.removeProperty('transition');
upper.style.removeProperty('-o-transition');
upper.style.removeProperty('-moz-transition');
upper.style.removeProperty('-webkit-transition');
upper.style.removeProperty('height');
// force a reflow
// if (upper.offsetParent) { /* empty */ }
upper.style['transition'] = 'height 1000ms';
upper.style['-o-transition'] = 'height 1000ms';
upper.style['-moz-transition'] = 'height 1000ms';
upper.style['-webkit-transition'] = 'height 1000ms';

スタイルシート

#upper {
    background-color: red;
}

WebKit (Gecko や Presto ではありません!)

1 ミリ秒のタイムアウトが原因でしか機能しないものは、おそらく実稼働に近づくべきではありませんが、誰かがこの問題の根底に到達するのに役立つ場合に備えて、これは指摘する価値があると思います.

私の推測では、WebKit には Presto や Gecko と同じ問題はありませんが、代わりに、同じ関数で適用されたスタイル変更を収集して一度に適用する最適化が含まれています。繰り返しますが、WebKit のソースまたは CSS3 仕様に近づいたことのない誰かからの純粋な憶測です。

http://jsfiddle.net/grantheaslip/DFcg9/

JavaScript

window.setTimeout(function() {
    upper.style.removeProperty('transition-property');
    upper.style.removeProperty('-o-transition-property');
    upper.style.removeProperty('-moz-transition-property');
    upper.style.removeProperty('-webkit-transition-property');
    upper.style.removeProperty('opacity');
    lower.style.removeProperty('opacity');
}, 1);

Gecko、Presto、および WebKit

両方のソリューションを組み合わせたものを次に示します。繰り返しますが、タイムアウトのハックのため、これは実際には使用しないでください。

http://jsfiddle.net/grantheaslip/N3NrB/

于 2011-06-27T17:26:40.897 に答える