Question

当您单击灰色圆圈时，菜单出现时，我需要像从顶部到底部那样缓慢地过渡到菜单。

我该如何安排时间呢？

<nav class="dropdown">

<div onclick="myFunction()" class="start-button dropbtn"></div>

<div id="myDropdown" class="nav-list dropdown-content">
 <a href="" class="nav-items">HOME</a>
 <a href="" class="nav-items">HOME</a>
 <a href="" class="nav-items">HOME</a>
 <a href="" class="nav-items">HOME</a>
 <a href="" class="nav-items">HOME</a>
</div>
</nav>

Answer 1

如果我的理解正确，您可以添加css过渡效果，如您在下面的链接波纹管中所见，在这里我也纠正了一些javascript和html代码。 https://jsfiddle.net/sp78wu0o/62/

<ul id="myDropdown" class="nav-list dropdown-content">
  <li><a href="#" class="nav-items">HOME</a></li>
  <li><a href="#" class="nav-items">HOME</a></li>
  <li><a href="#" class="nav-items">HOME</a></li>
  <li><a href="#" class="nav-items">HOME</a></li>
  <li><a href="#" class="nav-items">HOME</a></li>
</ul>

.dropdown {
  width: 100%;
  position: relative;
  display: flex;
  justify-content: center;
}

#myDropdown {
  margin: 0;
  padding: 0;
  opacity: 0;
  visibility: hidden;
  display: inline-block;
  text-align: center;
  position: absolute;
  top: 0;
  transition: .2s all ease;
}

#myDropdown li {
  padding: 0;
  display: inline-block;
  list-style: none;
}

.show {
  top: 130px !important;
  opacity: 1 !important;
  visibility: visible !important;
}

过渡持续时间，当我单击显示菜单的按钮时如何放置它

1 个答案: