CSS 表示プロパティの変換

Question

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

現在、CSS 3 トランジションは「display」プロパティでは動作しないようです、つまり、display: none< から、display: none< へのいかなる種類のトランジション/コード>も作成できません。 < code>display: block (または任意の組み合わせ)。

トップレベルのメニュー項目の 1 つにカーソルを置いたときに、上の例の 2 番目のレベルのメニューを「フェードイン」させる方法はありますか?

visibility: 属性で変換を使用できることは知っていますが、それを効率的に使用する方法が思いつきません。

高さの使用も試みましたが、惨めに失敗しました。

JavaScript を使えば簡単にできることもわかっていますが、CSS だけを使うことに挑戦したいのですが、私の能力は少し足りないと思います。

Answer 1

これが適切に機能するには、他の方法で要素を非表示にする必要があります。

の両方を絶対に配置し、非表示のものを 不透明度: 0 に設定することで、この効果を実現しました。

display 属性を none から block に切り替えると、他の要素では遷移は発生しません。

この問題を解決するには、要素を常に display: block にすることを許可しますが、次のいずれかを調整して要素を非表示にします:

1. 高さ を 0 に設定します。
2. 不透明度 を 0 に設定します。
3. overflow:hidden 要素を使用して、要素を別のフレームの外側に配置します。

他にも解決策があるかもしれませんが、要素を

display: none に切り替えると変換できません。たとえば、次のようなことを試すことができます: リーリー

しかし、これは

機能しません。私の経験では、これでは何も起こらないことがわかりました。

したがって、要素

display: block を常に保持する必要がありますが、次のようにすることで回避できます: リーリー

Answer 2

2 つ以上のトランジションを接続できます。今回は visibility が役に立ちます。

リーリー リーリー