如何添加一個轉換到導航欄下拉

我剛剛完成了一個移動導航欄，並希望添加一個轉換，以便它下降比目前慢。如何添加一個轉換到導航欄下拉

這裏我的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

如何添加一個轉換到導航欄下拉

回答

相關問題