CSS 表示プロパティのグラデーション効果

Question

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

現在、 CSS 3 トランジション効果は「display」属性には適用されないようです つまり、display: none から < code>display: block (または任意の組み合わせ)。

上の例で、誰かが一番上のメニュー項目の上にマウスを置いたときに、第 2 レベルのメニューを「フェードイン」させる方法はありますか?

visibility: 属性でトランジション効果を使用できることは知っていますが、それを効果的に使用する方法がわかりません。

高さの使用も試しましたが、結果はひどいものでした。

これは JavaScript を使用して簡単に実現できることも知っていますが、CSS だけを使用することに挑戦したかったのですが、少し理解が及んでいないように感じました。

Answer 1

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

<div> の両方を絶対位置に設定し、非表示のものを opacity: 0 に設定することで効果を実現しました。

display 属性を none から block に切り替えると、他の要素のトランジション効果は発生しません。

この問題を解決するには、要素を常に display: block にできるようにしますが、次のいずれかの方法で要素を非表示にします:

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

他にも解決策があるかもしれませんが、要素を display: none に切り替えると遷移できなくなります。たとえば、次のようなことを試してみるとよいでしょう:

リーリー

しかし、これは うまくいきません。私の経験上、これには何の効果もないことが分かりました。

したがって、要素の

display: block を常に維持する必要がありますが、次の方法でこれを回避できます。 リーリー

Answer 2

2 つ以上のトランジション エフェクトを接続できます。この時点では 可視性 が便利です。

リーリー リーリー