jquery - 如何向导航栏下拉列表添加过渡

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 属性中放置过渡。尝试这个。夸大最大高度不会影响应用程序的性能。