CSS トランジションが「display」プロパティで機能しないのはなぜですか?

CSS3 トランジションが表示プロパティで機能しない

問題の説明:

ホバー時に非表示の div をフェードインする CSS トランジションでは、望ましい結果が得られません。イージング遷移は観察されません。

コードの分析:

提供されたコードを検査すると、表示プロパティの使用に問題があることが明らかです。 CSS の表示プロパティは、ページ上の要素の存在と可視性を制御します。 none に設定すると、非表示 div の初期状態のように、要素がページのドキュメント フローから削除され、実質的に非表示になります。

遷移の適用性:

CSS トランジションは、要素のジオメトリまたは外観に影響を与えるプロパティにのみ適用されます。表示プロパティの場合、要素のジオメトリや外観を変更するのではなく、要素の表示状態を切り替えます。その結果、トランジションを表示プロパティに適用できません。

不透明度を使用した代替解決策:

表示プロパティを使用する代わりに、不透明度プロパティを使用して次のことを実現することを検討してください。希望のフェードイン効果を選択します。不透明度は要素の透明度を制御し、不透明度を 0 から 1 まで調整することで要素をスムーズにフェードインできます。

更新された CSS コード:

次の更新された CSS コード不透明度プロパティを使用して、スムーズなフェードイン遷移を作成します:

#header #button:hover > .content {
    opacity: 1;
    height: 150px;
    padding: 8px;    
}

#header #button .content {
    opacity: 0;
    height: 0;
    padding: 0 8px;
    overflow: hidden;
    transition: all .3s ease .15s;
}

不透明度ベースの遷移の利点:

• きめ細かい制御が可能不透明度の値を調整することで、フェードイン効果を重ねます。
• ドキュメント フローから要素を削除する表示とは異なり、トランジション中に要素の位置と寸法が保持されます。
• CSS トランジションと互換性があります。

結論:

CSS トランジションを表示プロパティに適用することはできませんが、不透明プロパティは実行可能で効果的なソリューションを提供します。ホバー時にスムーズなフェードイン効果を作成します。不透明度の値を調整することで、非表示の要素の表示と外観を制御し、目的のトランジションをシームレスに実現できます。

以上がCSS トランジションが「display」プロパティで機能しないのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。