Display プロパティを使用すると CSS3 トランジションが機能しないのはなぜですか?

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

概要

この記事では、表示プロパティの使用時に CSS トランジションが正しく機能しない問題について説明します。目的の結果を達成するための洞察と代替ソリューションを提供します。

問題ステートメント

目標は、親要素の上にマウスを置くと非表示の div がスムーズにフェードインするエフェクトを作成することです。ただし、CSS トランジションを使用してこれを実装しようとする試みは失敗し、トランジションなしで非表示の div のみが表示されます。

根本原因

CSS トランジションは、表示プロパティが設定されている要素に適用できません。どれにも。これは、display: none がドキュメント フローから要素を完全に削除し、どの効果も使用できなくなるためです。

代替解決策

目的のフェード効果を実現するには、代わりに不透明度プロパティを利用できます。ディスプレイの。非表示の div の不透明度を操作することで、カーソルを置いたときに徐々に表示できます。

更新された CSS コードは次のとおりです。

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

#header #button .content {
    opacity:0;
    height: 0;
    padding: 0 8px;
    overflow: hidden;

    -webkit-transition: all .3s ease .15s;
    -moz-transition: all .3s ease .15s;
    -o-transition: all .3s ease .15s;
    -ms-transition: all .3s ease .15s;
    transition: all .3s ease .15s;
}

このコードでは、非表示の div の不透明度がは最初は 0 に設定されており、非表示になります。親ボタンの上にマウスを置くと、不透明度が徐々に 1 に移行し、滑らかなフェード効果で div が表示されます。

結論

表示プロパティの制限を理解し、代替ソリューションを実装することで、不透明度を使用すると、ホバー時に非表示の要素に対して望ましいフェードイン トランジションを実現できます。

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