如何添加一个过渡到导航栏下拉菜单

Question

我刚刚完成了移动导航条的制作，想给它添加一个过渡，这样它就会比现在下降得慢。

我的jquery:

(function( $ ){   
   $(document).ready(function(){
       $(".burguer-nav").on("click", function(){
          $("header nav ul").toggleClass("open"); 
       }); 
   });    
})(jQuery);

和css:

span.burguer-nav {
    display: none;
}
@media only screen and (max-width: 845px){
    .main-navigation li a {
        display: block;
        text-align:center;
    }
    .burguer-nav{
        display: block !important;
        height: 40px;
        cursor: pointer;
        font-size: 18pt;
    }
    header nav ul{
        overflow:hidden;
        height:0;
        background-color: #505050;
    }
    header nav ul.open{
        height:auto;
    }
}

如何以及在哪里添加过渡?

Answer 1

@media only screen and (max-width: 845px){
    .main-navigation li a {
        display: block;
        text-align:center;
    }
    .burguer-nav{
        display: block !important;
        height: 40px;
        cursor: pointer;
        font-size: 18pt;
    }
    header nav ul{
        overflow:hidden;
        max-height:0;
        background-color: #505050;
        transition: all 0.3s ease-in-out;
    }
    header nav ul.open{
        max-height: 10000px;
    }
}

你不能在height属性中添加过渡。试试这个。放大max-height并不影响应用程序的性能。

Answer 2

测试和工作

将此添加到CSS到header nav ul

transition: height 0.3s linear 0s;

@Elton苏萨。谢谢，我忘了。你必须给出一个特定的高度

header nav ul.open{
    height:200px;
}

Answer 3

height不与transition反应。然而，opacity确实

.........
@media only screen ............{
    .......
    header nav ul{
        .......
        transition: all 1s;
        opacity:0;
    }
    header nav ul.open{
        .........
        opacity:1;
    }
}

Answer 4

你可以使用slideToggle方法代替toggleClass，我在这里编辑了代码，请查看请看这里的例子

(function ($){
  $(document).ready(function(){
  $(".burguer-nav").on("click", function(){
      $("header nav ul").slideToggle("slow");
   }); 

});})