我不明白为什么我的退出菜单动画不起作用

Question

我正在为我的网站制作一个退出菜单。我的结果必须是：如果我单击图像，则必须出现下拉菜单。我想要一个动画，所以我将高度设置为 0px，在 javascript 之后设置为 'auto'。我还添加了 0.3s 的动画。问题是我看不到动画。我希望有人能帮助我:)

HTML:

<div id="dropMenuNavBar">
<ul>
    <li> PORTFOLIO </li>
    <li> ABOUT ME </li>
    <li> CONTACT </li>
</ul>

<img onclick="dropMenuBar()" src="dropMenu.jpg">

CSS:

dropMenuNavBar {
    width: 100%;
    height: 0px;
    background-color: yellow;
    position: fixed;
    z-index: 50;
    margin-top: 70px;
    transition: 0.3s;
    text-align: center;
    font-size: 40px;
    overflow-x: hidden;
}

JAVASCRIPT

function dropMenuBar() {
    document.getElementById('dropMenuNavBar').style.height= 'auto';
}

Answer 1

您必须将 height 设置为 100%。动画不适用于 auto 设置。

var height = window.innerHeight;

function dropMenuBar() {
  document.getElementById('dropMenuNavBar').style.height = height + 'px';
}

#dropMenuNavBar {
  width: 100%;
  height: 0;
  background-color: yellow;
  position: fixed;
  z-index: 50;
  margin-top: 70px;
  transition: 0.3s;
  text-align: center;
  font-size: 40px;
  overflow-x: hidden;
}

<div id="dropMenuNavBar">
  <ul>
    <li> PORTFOLIO </li>
    <li> ABOUT ME </li>
    <li> CONTACT </li>
  </ul>
</div>
  <img onclick="dropMenuBar()" src="http://placehold.it/620x150">

我不明白为什么我的退出菜单动画不起作用

I can't figure out why my animation for my dropout menu doesn't work

javascript

height

animation

menu

onclick