如何添加一个转换到导航栏下拉

我刚刚完成了一个移动导航栏，并希望添加一个转换，以便它下降比目前慢。如何添加一个转换到导航栏下拉

这里我的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; 
    } 
}

如何以及在哪里可以添加过渡？

来源

2016-08-24 Ragmah

您可以将'transition：height'属性添加到'header nav ul'，但仅限于.open的height属性是实际值。浏览器不会过渡到“自动”的值 –

@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; 
    } 
}

您不能在高度属性中放置转场。尝试这个。夸大最大高度不会影响应用程序的性能。

来源

2016-08-24 06:48:55

我也有同样的问题，你的答案确实有所作为，但问题是有一个延迟toease英寸我试图改变缓解进出时间，但不适用这个代码：转换：所有0.6s缓解; 过渡：全部0.3s缓解; –

@EltonSousa https://jsfiddle.net/s9ze8pku/我创建的示例。看它。它应该工作。 –

是的，它确实有效，但仍然一样。缓解需要更长的时间，而不是缓解。没有办法可以完全一样吗？ – Ragmah

测试和工作

给你的CSS添加到header nav ul

transition: height 0.3s linear 0s;

@Elton Sousa.谢谢，我忘了。你必须给一个特定的高度

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

来源

2016-08-24 07:00:34

也许我没有做正确的方式，因为我刚刚测试过，它并没有真正在我的工作。 –

height犯规上transition反应。然而，opacity确实

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

来源

2016-08-24 07:04:35

请编辑更多信息。仅限代码和“尝试这个”的答案是不鼓励的，因为它们不包含可搜索的内容，也不解释为什么有人应该“尝试这个”。 – Paritosh

可以使用的slideToggle方法，而不是toggleClass，我已经在这里编辑代码，请 see example here

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

}）; }）

来源

2016-08-24 09:22:22 devendra

如何添加一个转换到导航栏下拉

回答

相关问题