表示プロパティを変更すると CSS3 移行が失敗するのはなぜですか?

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

質問:

表示プロパティで CSS3 トランジションが機能しないのはなぜですかは変更されていますか?

答え:

表示プロパティが「なし」に設定されている場合、ブロック要素全体が実質的に非表示になり、トランジション効果が防止されます。あるいは、不透明度を使用すると、フェード効果とスムーズなトランジションが可能になります。

代替 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;
}

動作デモ:

[Fiddle](https://jsfiddle.net/alexdocker/KAyvL/)

追加メモ:

• 簡潔にするためにベンダー プレフィックスは省略されています。
• 境界線の半径を調整して、より微妙なトランジション効果を作成することも検討できます。
• 同様の洞察については、この [SO ディスカッション](https://stackoverflow.com/questions/13691003/displaynone-css3-transition) を参照してください。

以上が表示プロパティを変更すると CSS3 移行が失敗するのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。