表示がなしに設定されている場合、CSS3 トランジションが機能しないのはなぜですか?

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

CSS では、表示プロパティは要素が表示されるか非表示になるかを定義する上で重要な役割を果たします。 。一方、トランジションを使用すると、時間の経過とともに視覚的に滑らかに変化することができます。ただし、表示を none に設定して要素にトランジションを適用しようとすると、予期しない動作が発生する可能性があります。

問題の解決

この問題は表示の性質に起因します。財産。要素の表示を none に設定すると、その要素は存在しなかったかのようにページから削除されます。そのため、部分的に表示したり遷移したりすることはできません。

代替解決策: 不透明度を使用する

ホバー時に望ましいフェード効果を実現するには、代わりに不透明度プロパティを利用することを検討してください。 。不透明度は要素の透明度を制御し、要素を徐々に表示または非表示にします。

CSS ソリューション

フェード効果を有効にするには、次の CSS 調整を実装します。

不透明度とトランジションを組み合わせることで、ボタンの上にマウスを置くと、非表示のコンテンツがフェードインして表示されます。ブラウザ間の互換性のためのベンダー プレフィックスは、簡潔にするために省略されています。

その他の考慮事項

不透明度とは別に、高さとパディングのプロパティを調整して同様のことを実現することも検討できます。効果。

追加リソース

• [CSS トランジション チュートリアル](https://www.w3schools.com/css/css3_transitions.asp)
• [CSS トランジションを使用した非表示要素の処理](https://css-tricks.com/transitions-with-hidden-elements/)
• [スタック オーバーフローに関する同様のトピック](https://stackoverflow .com/questions/30130725/css-animation-not-visible-when-display-none)

以上が表示がなしに設定されている場合、CSS3 トランジションが機能しないのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。