CSS 過渡下拉菜單，應該很簡單

Question

我一直在嘗試為這段代碼制作動畫，我知道我無法制作動畫： display:none; ，所以我試圖改變ul的高度，但它不起作用......

請幫忙，我...應該很簡單，但我無法弄清楚...

感謝您的每一個回復！ :)

https://jsfiddle.net/qwv2jLpd/1/

 document.querySelector(".menu p").onclick = function() { let seznam = document.querySelector(".menu ul"); if (seznam.classList.contains('menu_invisible')) { seznam.classList.remove('menu_invisible'); } else { seznam.classList.add('menu_invisible'); } }

 .menu_invisible { display: none; } .menu { cursor: pointer; }

 <div class="menu"> <p>>>Show drop down menu <<</p> <ul style="transition: all 500ms ease;" class="menu_invisible"> <li><a href="#">whatever</a></li> <li><a href="#">I don't know</a></li> <li><a href="#">Why it</a></li> <li><a href="#">doesn't</a></li> <li><a href="k#">work?</a></li> <li><a href="#">Help please...</a></li> </ul> </div>

Answer 1

如果你想用:hover觸發過渡，這可以用純 CSS 來實現，但這里有一個如何通過點擊來實現的例子，

 document.querySelector(".menu p").onclick = function() { var ul = document.querySelector('.menu_neviditelne').classList.toggle('active--list'); }

 .menu_neviditelne { max-height: 0; overflow: hidden; transition: all 400ms ease-in-out; } .menu { cursor:pointer; user-select: none; } .active--list { max-height: 500px; }

 <div class="menu"> <p>>>Zobrazit nabídku<<</p> <ul class="menu_neviditelne"> <li><a href="index.html">Úvod</a></li> <li><a href="kavarna.html">Kavárna</a></li> <li><a href="nabidka.html">Nabídka</a></li> <li><a href="kava.html">O kávě</a></li> <li><a href="kariera.html">Kariéra</a></li> <li><a href="kontakt.html">Kontakt</a></li> </ul> </div>

Answer 2

也許它會以某種方式幫助你。 :)

@keyframes example{
    0%{height: 150px;}
    100%{height: 180px;}
}

li a.locations:hover{
    background-color: #e15c00;
     animation-name: example;
     animation-duration: 1s;
}