Display: none アニメーション - CSSのdisplayプロパティでのトランジション

css transition-property / css / css-transitions

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

Ankit Kante



Answer #1
#selector {
    overflow: hidden; //高さ= 0の間、要素のコンテンツを非表示にします
    height: 0; opacity: 0;
    transition: height 0ms 400ms, opacity 400ms 0ms;
}
#selector.visible {
    height: auto; opacity: 1;
    transition: height 0ms 0ms, opacity 600ms 0ms;
}