使用"max-height"对下拉菜单进行动画处理

Question

我做了一个响应式下拉汉堡菜单，除了一件事，我喜欢它的工作原理。我想将其慢慢下拉，截至目前，当单击汉堡菜单图标时，它才会出现。我阅读了有关使用max-height: 0的信息，然后在单击Bing后给它一个max-height，但我尝试了该方法但没有成功。任何帮助将不胜感激！

document.querySelector('.hamburger').addEventListener("click", function() {
  document.querySelector('nav ul').classList.toggle('expand');
});

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  text-decoration: none;
}
body {
  font-family: sans-serif;
}
.clearfix::after {
  content: "";
  clear: both;
  display: table;
}
.container {
  width: 80%;
  max-width: 1200px;
  height: auto;
  margin: 0 auto;
  position: relative;
}
nav {
  height: 60px;
  line-height: 60px;
  background-color: red;
}
.logo {
  color: white;
  float: left;
}
.toggle-menu,
.hamburger {
  display: none;
}
.hamburger {
  position: absolute;
  transform: rotate(90deg);
}
ul {
  float: right;
}
ul li {
  float: left;
  list-style-type: none;
}
ul li a {
  color: white;
  margin: 0;
  padding: 0 5px;
}
.expand {
  max-height: 500px;
  display: block;
  transition: all .3s ease;
}
@media(max-width: 768px) {
  nav .container {
    width: 100%;
  }
  nav {
    padding-bottom: 0;
  }
  .logo {
    margin-left: 2%;
  }
  .toggle-menu,
  .hamburger {
    display: block;
  }
  .hamburger {
    color: white;
    font-size: 30px;
    position: absolute;
    top: 0;
    right: 3%;
  }
  ul {
    width: 100%;
    max-height: 0;
    float: none;
    /*--- body content goes underneath ul when expanded ---*/
    position: absolute;
    top: 60px;
    z-index: 99;
    /*------------------------------------------*/
    display: none;
  }
  ul li {
    width: 100%;
    text-align: center;
  }
  ul li a {
    display: block;
    line-height: 35px;
    background-color: coral;
  }
  ul li a:hover {
    background-color: orange;
  }
}

<nav class="clearfix">
  <div class="container">
    <div class="logo">
      <h1>LOGO</h1>
    </div>
    <div class="toggle-menu">
      <span class="hamburger">|||</span>
    </div>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Services</a></li>
      <li><a href="#">Gallery</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </div>
</nav>
<section>
  <div class="container">
    <br>
    <p>
      Lorem 1 ipsum dolor sit amet consectetur adipisicing elit. Obcaecati sed facilis doloribus quasi consequatur illo asperiores non labore rem suscipit enim vel, aliquam tempore amet quod totam harum, incidunt quidem. Lorem ipsum dolor sit amet consectetur
      adipisicing elit. Excepturi quisquam quam eius harum iusto dolore suscipit? Neque, tempora eius cumque porro nulla fugit eum aliquam exercitationem voluptas nostrum corrupti autem?
    </p>
    <br>
    <p>
      Lorem 2 ipsum dolor sit amet consectetur adipisicing elit. Obcaecati sed facilis doloribus quasi consequatur illo asperiores non labore rem suscipit enim vel, aliquam tempore amet quod totam harum, incidunt quidem. Lorem ipsum dolor sit amet consectetur
      adipisicing elit. Excepturi quisquam quam eius harum iusto dolore suscipit? Neque, tempora eius cumque porro nulla fugit eum aliquam exercitationem voluptas nostrum corrupti autem?
    </p>
    <br>
    <p>
      Lorem 3 ipsum dolor sit amet consectetur adipisicing elit. Obcaecati sed facilis doloribus quasi consequatur illo asperiores non labore rem suscipit enim vel, aliquam tempore amet quod totam harum, incidunt quidem. Lorem ipsum dolor sit amet consectetur
      adipisicing elit. Excepturi quisquam quam eius harum iusto dolore suscipit? Neque, tempora eius cumque porro nulla fugit eum aliquam exercitationem voluptas nostrum corrupti autem?
    </p>
  </div>
</section>

Answer 1

这是因为您使用 display: none到 display: block，并且过渡确实有效，但是它等待过渡结束，然后添加 display: block;，以便您看不到过渡。

您只需删除display: none并在ul元素上添加overflow: hidden;即可。

Answer 2

  transition: all 0.3s ease-in-out 0s, visibility 0s linear 0.3s, z-index 0s linear 0.01s;
  transition-delay: 0s, 0s, 0.3s; /* this removes the transition delay so the menu will be visible while the other styles transition */

尝试一下，我看到您已经具有过渡属性，但是您仍然需要一些额外的参数和一个过渡范围来删除过渡延迟，以便在其他样式过渡时可见。

Answer 3

您可以使用transform:scale()像以下opacity一样对其进行动画化，以使其更直观。

document.querySelector('.hamburger').addEventListener("click", function() {
  document.querySelector('nav ul').classList.toggle('expand');
});

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  text-decoration: none;
}
body {
  font-family: sans-serif;
}
.clearfix::after {
  content: "";
  clear: both;
  display: table;
}
.container {
  width: 80%;
  max-width: 1200px;
  height: auto;
  margin: 0 auto;
  position: relative;
}
nav {
  height: 60px;
  line-height: 60px;
  background-color: red;
}
.logo {
  color: white;
  float: left;
}
.toggle-menu,
.hamburger {
  display: none;
}
.hamburger {
  position: absolute;
  transform: rotate(90deg);
}
ul {
  float: right;
}
ul li {
  float: left;
  list-style-type: none;
}
ul li a {
  color: white;
  margin: 0;
  padding: 0 5px;
}
.expand {
  transform: scale(1, 1);
  opacity: 1;
  visibility: visible;
}
@media(max-width: 768px) {
  nav .container {
    width: 100%;
  }
  nav {
    padding-bottom: 0;
  }
  .logo {
    margin-left: 2%;
  }
  .toggle-menu,
  .hamburger {
    display: block;
  }
  .hamburger {
    color: white;
    font-size: 30px;
    position: absolute;
    top: 0;
    right: 3%;
  }
  ul {
    width: 100%;
    max-height: 0;
    float: none;
    position: absolute;
    top: 60px;
    z-index: 99;
    transform: scale(1, 0);
    transition: all .5s ease;
    opacity: 0;
    visibility: hidden;
  }
  ul li {
    width: 100%;
    text-align: center;
  }
  ul li a {
    display: block;
    line-height: 35px;
    background-color: coral;
  }
  ul li a:hover {
    background-color: orange;
  }
}

<nav class="clearfix">
  <div class="container">
    <div class="logo">
      <h1>LOGO</h1>
    </div>
    <div class="toggle-menu">
      <span class="hamburger">|||</span>
    </div>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Services</a></li>
      <li><a href="#">Gallery</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </div>
</nav>
<section>
  <div class="container">
    <br>
    <p>
      Lorem 1 ipsum dolor sit amet consectetur adipisicing elit. Obcaecati sed facilis doloribus quasi consequatur illo asperiores non labore rem suscipit enim vel, aliquam tempore amet quod totam harum, incidunt quidem. Lorem ipsum dolor sit amet consectetur
      adipisicing elit. Excepturi quisquam quam eius harum iusto dolore suscipit? Neque, tempora eius cumque porro nulla fugit eum aliquam exercitationem voluptas nostrum corrupti autem?
    </p>
    <br>
    <p>
      Lorem 2 ipsum dolor sit amet consectetur adipisicing elit. Obcaecati sed facilis doloribus quasi consequatur illo asperiores non labore rem suscipit enim vel, aliquam tempore amet quod totam harum, incidunt quidem. Lorem ipsum dolor sit amet consectetur
      adipisicing elit. Excepturi quisquam quam eius harum iusto dolore suscipit? Neque, tempora eius cumque porro nulla fugit eum aliquam exercitationem voluptas nostrum corrupti autem?
    </p>
    <br>
    <p>
      Lorem 3 ipsum dolor sit amet consectetur adipisicing elit. Obcaecati sed facilis doloribus quasi consequatur illo asperiores non labore rem suscipit enim vel, aliquam tempore amet quod totam harum, incidunt quidem. Lorem ipsum dolor sit amet consectetur
      adipisicing elit. Excepturi quisquam quam eius harum iusto dolore suscipit? Neque, tempora eius cumque porro nulla fugit eum aliquam exercitationem voluptas nostrum corrupti autem?
    </p>
  </div>
</section>

但是，如果您要max-height解决方案删除display:none ...您无法使用display:none; ...和max-height:0设置overflow:hidden来隐藏溢出内容。

document.querySelector('.hamburger').addEventListener("click", function() {
  document.querySelector('nav ul').classList.toggle('expand');
});

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  text-decoration: none;
}
body {
  font-family: sans-serif;
}
.clearfix::after {
  content: "";
  clear: both;
  display: table;
}
.container {
  width: 80%;
  max-width: 1200px;
  height: auto;
  margin: 0 auto;
  position: relative;
}
nav {
  height: 60px;
  line-height: 60px;
  background-color: red;
}
.logo {
  color: white;
  float: left;
}
.toggle-menu,
.hamburger {
  display: none;
}
.hamburger {
  position: absolute;
  transform: rotate(90deg);
}
ul {
  float: right;
}
ul li {
  float: left;
  list-style-type: none;
}
ul li a {
  color: white;
  margin: 0;
  padding: 0 5px;
}
.expand {
  max-height: 500px;
}
@media(max-width: 768px) {
  nav .container {
    width: 100%;
  }
  nav {
    padding-bottom: 0;
  }
  .logo {
    margin-left: 2%;
  }
  .toggle-menu,
  .hamburger {
    display: block;
  }
  .hamburger {
    color: white;
    font-size: 30px;
    position: absolute;
    top: 0;
    right: 3%;
  }
  ul {
    width: 100%;
    max-height: 0;
    float: none;
    position: absolute;
    top: 60px;
    z-index: 99;
    overflow: hidden;
    transition: all .5s linear;
  }
  ul li {
    width: 100%;
    text-align: center;
  }
  ul li a {
    display: block;
    line-height: 35px;
    background-color: coral;
  }
  ul li a:hover {
    background-color: orange;
  }
}

<nav class="clearfix">
  <div class="container">
    <div class="logo">
      <h1>LOGO</h1>
    </div>
    <div class="toggle-menu">
      <span class="hamburger">|||</span>
    </div>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Services</a></li>
      <li><a href="#">Gallery</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </div>
</nav>
<section>
  <div class="container">
    <br>
    <p>
      Lorem 1 ipsum dolor sit amet consectetur adipisicing elit. Obcaecati sed facilis doloribus quasi consequatur illo asperiores non labore rem suscipit enim vel, aliquam tempore amet quod totam harum, incidunt quidem. Lorem ipsum dolor sit amet consectetur
      adipisicing elit. Excepturi quisquam quam eius harum iusto dolore suscipit? Neque, tempora eius cumque porro nulla fugit eum aliquam exercitationem voluptas nostrum corrupti autem?
    </p>
    <br>
    <p>
      Lorem 2 ipsum dolor sit amet consectetur adipisicing elit. Obcaecati sed facilis doloribus quasi consequatur illo asperiores non labore rem suscipit enim vel, aliquam tempore amet quod totam harum, incidunt quidem. Lorem ipsum dolor sit amet consectetur
      adipisicing elit. Excepturi quisquam quam eius harum iusto dolore suscipit? Neque, tempora eius cumque porro nulla fugit eum aliquam exercitationem voluptas nostrum corrupti autem?
    </p>
    <br>
    <p>
      Lorem 3 ipsum dolor sit amet consectetur adipisicing elit. Obcaecati sed facilis doloribus quasi consequatur illo asperiores non labore rem suscipit enim vel, aliquam tempore amet quod totam harum, incidunt quidem. Lorem ipsum dolor sit amet consectetur
      adipisicing elit. Excepturi quisquam quam eius harum iusto dolore suscipit? Neque, tempora eius cumque porro nulla fugit eum aliquam exercitationem voluptas nostrum corrupti autem?
    </p>
  </div>
</section>

Answer 4

css属性与display: none不起作用，因此您应播放高度：0或在某些负值中以某种负值播放，以将其隐藏在画布上，一旦您附加了类，再次位置。

document.querySelector('.hamburger').addEventListener("click", function(){
  document.querySelector('nav ul').classList.toggle('expand');
});

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  text-decoration: none;
}
body{
  font-family: sans-serif;
}
.clearfix::after {
    content: "";
    clear: both;
    display: table;
}
.container{
  width: 80%;
  max-width: 1200px;
  height: auto;
  margin: 0 auto;
  position: relative;
}
nav{
  height: 60px;
  line-height: 60px;
  background-color: red;
}
.logo{
  color: white;
  float: left;
}
.toggle-menu,
.hamburger{
  display: none;  
}
.hamburger{
  position: absolute;
  transform: rotate(90deg);
}
ul{
  float: right;
}
ul li{
  float: left;
  list-style-type: none;
}
ul li a{
  color: white;
  margin: 0;
  padding: 0 5px;
}
.expand{
  top: 60px;
  max-height: 500px;
  transition: all .3s ease;
}

@media(max-width: 768px){
  
  nav .container{
    width: 100%;
  }
  
  nav{
    padding-bottom: 0;
  }
  
  .logo{
    margin-left: 2%;
  }
  
  .toggle-menu,
  .hamburger{
    display: block;
  }
  
  .hamburger{
    color: white;
    font-size: 30px;
    position: absolute;
    top: 0;
    right: 3%;
  }
  
  ul{
    width: 100%;
    max-height: 0;
    float: none;
    /*--- body content goes underneath ul when expanded ---*/
    position: absolute;
    top: -600px;
    z-index: 99;
    /*------------------------------------------*/
  
  }
  
  ul li{
    width: 100%;
    text-align: center;
  }
  
  ul li a{
    display: block;
    line-height: 35px;
    background-color: coral;
  }
  
  ul li a:hover{
    background-color: orange;
  }
  
}

<nav class="clearfix">
  <div class="container">
    
    <div class="logo">
      <h1>LOGO</h1>
    </div>
    
    <div class="toggle-menu">
      <span class="hamburger">|||</span>
    </div>
    
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Services</a></li>
      <li><a href="#">Gallery</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
    
  </div>
</nav>
<section>
  <div class="container">
    <br>
    <p>
      Lorem 1 ipsum dolor sit amet consectetur adipisicing elit. Obcaecati sed facilis doloribus quasi consequatur illo asperiores non labore rem suscipit enim vel, aliquam tempore amet quod totam harum, incidunt quidem. Lorem ipsum dolor sit amet consectetur adipisicing elit. Excepturi quisquam quam eius harum iusto dolore suscipit? Neque, tempora eius cumque porro nulla fugit eum aliquam exercitationem voluptas nostrum corrupti autem?
    </p>
    <br>
    <p>
      Lorem 2 ipsum dolor sit amet consectetur adipisicing elit. Obcaecati sed facilis doloribus quasi consequatur illo asperiores non labore rem suscipit enim vel, aliquam tempore amet quod totam harum, incidunt quidem. Lorem ipsum dolor sit amet consectetur adipisicing elit. Excepturi quisquam quam eius harum iusto dolore suscipit? Neque, tempora eius cumque porro nulla fugit eum aliquam exercitationem voluptas nostrum corrupti autem?
    </p>
    <br>
    <p>
      Lorem 3 ipsum dolor sit amet consectetur adipisicing elit. Obcaecati sed facilis doloribus quasi consequatur illo asperiores non labore rem suscipit enim vel, aliquam tempore amet quod totam harum, incidunt quidem. Lorem ipsum dolor sit amet consectetur adipisicing elit. Excepturi quisquam quam eius harum iusto dolore suscipit? Neque, tempora eius cumque porro nulla fugit eum aliquam exercitationem voluptas nostrum corrupti autem?
    </p>
  </div>
</section>