使用＆＃34; max-height＆＃34;动画下拉菜单

Question

我做了一个响应式下拉汉堡包菜单，我喜欢它到目前为止的工作方式，除了一件事。我想慢慢下拉，现在它只是在点击汉堡包菜单图标时出现。我阅读了有关使用max-height: 0然后点击后给它max-height的信息，但我尝试了这种方法并且没有成功。任何帮助将不胜感激！

＆＃13;

＆＃13;

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

＆＃13;

* {
  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;
  }
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

您可以使用transform:scale()使用opacity为其设置动画，以使其更直观..

＆＃13;

＆＃13;

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

＆＃13;

* {
  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;
  }
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

但是，如果您希望max-height解决方案移除display:none ...，则无法使用display:none;设置动画...并在max-height:0设置{{ 1}}隐藏溢出内容。

＆＃13;

＆＃13;

overflow:hidden

＆＃13;

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

＆＃13;

* {
  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;
  }
}

＆＃13;

＆＃13;

＆＃13;

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 */

试试这个，我看到你已经有了转换attribuut，但你仍然需要一些额外的参数和一个转换deley来消除转换延迟，以便在其他样式转换时可见。

Answer 3

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

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

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>