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

【问题标题】：CSS transition drop down menu, it should be simpleCSS过渡下拉菜单，应该很简单
【发布时间】：2018-11-14 20:35:01
【问题描述】：

我一直在尝试为这段代码制作动画，我知道我无法制作动画：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>

【问题讨论】：

你说你试图操纵高度并且知道你不能为display: none;制作动画，但是我看到的唯一尝试是你试图在display: none上做transition: all -您能否分享一些涉及height 的其他非工作尝试？
为了设置高度动画，您需要使用max-height 和max-height 值都需要明确（IE 你不能从max-height:0; 动画到max-height:auto; )
How can I transition height: 0; to height: auto; using CSS?的可能重复
其他尝试包括：将ul的高度设置为0，将ul的max-height设置为0，将单个li的高度设置为0；我也试图玩不透明度......这些东西都没有真正起作用......我能够为不透明度选项设置动画，但菜单仍然占用空间...... at is 是可点击的......（我没有想要...）

标签： javascript html css transition

【解决方案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>

【讨论】：

我可能会添加一个附加功能：如果您显示菜单，以像素为单位获取其高度，然后再次隐藏它，这在 JavaScript 中发生得如此之快以至于它实际上不会更新 DOM隐藏/显示它，但您将拥有菜单的实际高度。然后，您可以使用 JavaScript 设置最大高度。这样做的好处是您不必在 CSS 中设置任意 500px 并在每次更改、添加或删除菜单中的项目时更新它 - 它会自动设置为正确的高度。跨度>

【解决方案2】：

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

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

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

【讨论】：