javascript - 我怎样才能动画这个？

Question

好的，我已经为我的站点制作了一个简单的汉堡包下拉菜单。我将其设置为不显示，然后单击切换按钮以添加一个将显示设置为阻止的类。

我知道 display 属性不能设置动画，但我不知道在不使用 display 属性的情况下如何实现同样的效果。

HTML:

<nav class="top-navigation" role="navigation" id="top-navigation">

    <div class="container">

        <div class="top-navigation_header">

            <button class="top-navigation-toggle" id="menu-toggle">
                <span class="toggle_bars"></span>
                <span class="toggle_bars"></span>
                <span class="toggle_bars"></span>
            </button>

            <img src="//placehold.it/200x100" alt="Logo">

        </div>

    <ul class="top-navigation_menu" id="menu">

        <li><a href="">Home</a></li>
        <li><a href="">About</a></li>
        <li><a href="">Services</a></li>
        <li><a href="">Portfolio</a></li>
        <li><a href="">Blog</a></li>
        <li><a href="">Contact</a></li>

    </ul>

    </div>

</nav>

CSS:

.top-navigation {
  position: fixed;
  width: 100%;
  z-index: 10; }
  .top-navigation:after, .top-navigation:before {
    content: "";
    display: table; }
  .top-navigation:after {
    clear: both; }

.top-navigation_header {
  float: left;
  padding: 24px 16px; }
  .top-navigation_header img {
    width: 100px;
    float: left; }

.top-navigation_menu {
  float: right;
  color: #FFFFFF; }
  .top-navigation_menu li {
    display: inline-block;
    margin: 20px 0; }
    .top-navigation_menu li a {
      display: block;
      padding: 16px;
      text-transform: uppercase;
      font-size: 13px; }

.collapse {
  display: block !important; }

.top-navigation-toggle {
  display: none;
  background-color: transparent;
  border: 0px;
  outline: 0px;
  margin: 0px;
  padding: 16px;
  cursor: pointer;
  float: right;
  z-index: 2; }
  .top-navigation-toggle .toggle_bars {
    display: block;
    width: 18px;
    height: 2px;
    margin: 4px 0;
    background-color: #FFFFFF; }

@media screen and (max-width: 700px) {
  .top-navigation {
    background-color: #363636; }

  .top-navigation_header {
    width: 100%; }
    .top-navigation_header img {
      width: 100px;
      float: left; }

  .top-navigation_menu {
    display: none;
    float: left;
    width: 100%; }
    .top-navigation_menu li {
      display: block;
      margin: 20px 0; }
      .top-navigation_menu li a {
        display: block;
        padding: 16px;
        text-transform: uppercase;
        font-size: 13px; }

  .top-navigation-toggle {
    display: block; } }

JavaScript:

    var menu = document.getElementById("menu");
    var toggleButton = document.getElementById("menu-toggle");

    function toggleMenu() {
        menu.classList.toggle("collapse");
    }

    toggleButton.addEventListener("click", toggleMenu);

Answer 1

首先删除显示属性。由于您不能使用 css3 将高度设置为 auto，我建议您使用 max-height hack:

.top-navigation {
max-height:102px;
overflow:hidden;
transition:0.2s all ease;
}
.collapse{max-height:1000px;}

然后使用 javascript:

var topnavigation = document.getElementById("top-navigation");
var toggleButton = document.getElementById("menu-toggle");

function toggleMenu() {
    topnavigation.classList.toggle("collapse");
}

toggleButton.addEventListener("click", toggleMenu);

一个完整的工作示例:

var topnavigation = document.getElementById("top-navigation");
    var toggleButton = document.getElementById("menu-toggle");

    function toggleMenu() {
        topnavigation.classList.toggle("collapse");
    }

    toggleButton.addEventListener("click", toggleMenu);

.top-navigation {
  position: fixed;
  width: 100%;
  z-index: 10;
  max-height:102px;
overflow:hidden;
transition:0.5s all ease;
  }
  .collapse{max-height:1000px;}
  .top-navigation:after, .top-navigation:before {
    content: "";
    display: table; }
  .top-navigation:after {
    clear: both; }

.top-navigation_header {
  float: left;
  padding: 24px 16px;
  box-sizing: border-box;
}
  .top-navigation_header img {
    width: 100px;
 
    float: left; }

.top-navigation_menu {
  float: right;
  color: #FFFFFF; }
  .top-navigation_menu li {
    display: inline-block;
    margin: 20px 0; }
    .top-navigation_menu li a {
      display: block;
      padding: 16px;
      text-transform: uppercase;
      font-size: 13px; }

.collapse {
  display: block !important; }

.top-navigation-toggle {
  display: none;
  background-color: transparent;
  border: 0px;
  outline: 0px;
  margin: 0px;
  padding: 16px;
  cursor: pointer;
  float: right;
  z-index: 2; }
  .top-navigation-toggle .toggle_bars {
    display: block;
    width: 18px;
    height: 2px;
    margin: 4px 0;
    background-color: #FFFFFF; }

@media screen and (max-width: 700px) {
  .top-navigation {
    background-color: #363636; }

  .top-navigation_header {
    width: 100%; }
    .top-navigation_header img {
      width: 100px;
      float: left; }

  .top-navigation_menu {
    float: left;
    width: 100%; }
    .top-navigation_menu li {
      display: block;
      margin: 20px 0; }
      .top-navigation_menu li a {
        display: block;
        padding: 16px;
        text-transform: uppercase;
        font-size: 13px; }

  .top-navigation-toggle {
    display: block; } }

<nav class="top-navigation" role="navigation" id="top-navigation">

    <div class="container">

        <div class="top-navigation_header">

            <button class="top-navigation-toggle" id="menu-toggle">
                <span class="toggle_bars"></span>
                <span class="toggle_bars"></span>
                <span class="toggle_bars"></span>
            </button>

            <img src="//placehold.it/200x100" alt="Logo">

        </div>

    <ul class="top-navigation_menu" id="menu">

        <li><a href="">Home</a></li>
        <li><a href="">About</a></li>
        <li><a href="">Services</a></li>
        <li><a href="">Portfolio</a></li>
        <li><a href="">Blog</a></li>
        <li><a href="">Contact</a></li>

    </ul>

    </div>

</nav>