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

如果您想使用: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;
}

CSS Transition下拉菜单，应该很简单

2 个答案: