メイクCSS高遷移スムーズに

Question

は、私は、ナビゲーションメニューを構築するために、次のHTMLマークアップとCSSを持っている：

.submenu { 
 
    max-height: 0; 
 
    overflow-y: hidden; 
 
    transition: max-height 0.3s ease-in; 
 
} 
 
.submenu.opened{ 
 
    max-height: 200px; 
 
}

<ul class="navigation navigation-main navigation-accordion"> 
 
    <li><a href="#">Dashboard</a></li> 
 
    <li> 
 
    <a href="#">Products</a> 
 
    <ul class="submenu"> 
 
     <li>All Products</li> 
 
     <li>Popular Products</li> 
 
    </ul> 
 
    </li> 
 
</ul>

私はJavaScriptを使用してsubmenu上のクラスopenedを切り替えます。 submenuは、移行の助けを借りてクリックで上下にスライドします。しかし、私は遷移をできるだけ滑らかにしたい。

上記のCSSコードを改善して、製品リンクをすばやくクリックしてもうまく動作しないため、誰でも助けてください。

Answer 1

私は誰もがスムーズの別の定義を持っていると思いますが、私はease-in-outへease-inから簡単に機能を変更することとし、公正な移行の期間で遊ぶよりも、ここから始めます。 0.3sは少し速いですが、あなたに合うまでの時間を長くしてください。ここで1.5秒の持続時間を有する例である：

document.querySelector('#prod').addEventListener('click', function() { 
 
    document.querySelector('.submenu').classList.toggle('opened'); 
 
}, false);

.submenu { 
 
    max-height: 0; 
 
    overflow-y: hidden; 
 
    transition: max-height 1.5s ease-in-out; 
 
} 
 

 
.submenu.opened{ 
 
    max-height: 200px; 
 
} 
 

 
body { 
 
    font-size: 1.5em; 
 
    font-family: sans-serif; 
 
    line-height: 1.7 
 
}

<ul class="navigation navigation-main navigation-accordion"> 
 
    <li><a href="#">Dashboard</a></li> 
 
    <li> 
 
    <a href="#" id="prod">Products</a> 
 
    <ul class="submenu"> 
 
     <li>All Products</li> 
 
     <li>Popular Products</li> 
 
    </ul> 
 
    </li> 
 
</ul>