CSS 过渡下拉菜单，应该很简单

Question

我一直在尝试为这段代码制作动画，我知道我无法制作动画：display:none； , 所以我尝试改变ul的高度，但是没有用...

请帮帮我...应该很简单，但我想不通...

感谢您的每一次回复！ :)

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

也许它会以某种方式帮助你。 :)

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

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

Answer 2

如果你想用 :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>

CSS 过渡下拉菜单，应该很简单

CSS transition drop down menu, it should be simple

html

javascript

css

transition