CSS 表示プロパティの変換

Question

私は現在、CSS の「メガ ドロップダウン」メニューを設計しています。基本的には通常の純粋な CSS ドロップダウン メニューですが、さまざまなタイプのコンテンツが含まれています。現在、CSS3 トランジションは「display」プロパティでは動作しないようです。つまり、display:none から display:block (または任意の組み合わせ) に移行することはできません。誰かがトップレベルのメニュー項目の 1 つにカーソルを置いたときに、上の例の 2 番目のレベルのメニューを「フェードイン」させる方法はありますか? Visibility: 属性で変換を使用できることはわかっていますが、それを効率的に使用する方法が思いつきません。私も試してみました

P粉701491897 · Answer

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

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

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

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


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


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

リーリー

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

したがって、要素 display: block を常に保持する必要がありますが、次のようにすることで回避できます: 

リーリー

P粉071743732 · Answer

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

リーリーリーリー