☰

CSS 表示プロパティのトランジション 質問する

tag-icon • tag-icon css css-transitions
CSS 表示プロパティのトランジション 質問する

現在、CSS の「メガ ドロップダウン」メニューを設計しています。これは、基本的には通常の CSS のみのドロップダウン メニューですが、さまざまな種類のコンテンツが含まれています。

現時点では、CSS 3 トランジションは 'display' プロパティには適用されないようですdisplay: none。つまり、からへのトランジションdisplay: block(または任意の組み合わせ) を実行することはできません。

上記の例で、最上位メニュー項目の 1 つにマウスを移動したときに、2 層目のメニューを「フェードイン」する方法はありますか?

プロパティでトランジションを使用できることは知っていますvisibility:が、それを効果的に使用する方法が思いつきません。

高さも使ってみましたが、まったく失敗しました。

JavaScript を使用してこれを実現するのは簡単であることもわかっていますが、CSS のみを使用して挑戦したいと思っていましたが、少し足りない気がします。

ベストアンサー1

2 つ以上の遷移を連結することができ、visibilityそれが今回便利な点です。

div {
  border: 1px solid #eee;
}
div > ul {
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s, opacity 0.5s linear;
}
div:hover > ul {
  visibility: visible;
  opacity: 1;
}
<div>
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
  </ul>
</div>

(プロパティのベンダー プレフィックスを忘れないでくださいtransition。)

詳細はこの記事。

おすすめ記事