Question

我正在为我的网站制作一个退出菜单。我的结果必须是：如果我点击图片，就必须出现退出菜单。我想要一个动画，所以我将高度设置为0px，然后将javascript设置为“自动”。我还添加了0.3秒的动画。问题是我看不到动画。我希望有人可以帮助我:)。

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">

我无法弄清楚为什么我的辍学菜单的动画不起作用

1 个答案: