[英]Bootstrap 4 collapse has delay
我正在移動視圖上創建離線導航菜單,我遇到了在添加類.show之前有0.3s延遲的問題。
我嘗試通過jquery添加自定義類.active但結果是相同的 - 即使該類沒有延遲添加,此類的轉換仍然延遲。
.collapse.active{
transform: translateX(0%);
}
這很可能是由於添加和計算我並不真正需要的內聯樣式高度引起的,因為我總是希望導航為100vh。 有沒有辦法削減或加快計算部分?
嘗試添加此代碼但完全沒有幫助。
.collapsing {
-webkit-transition: all 0s ease-out;
-o-transition: all 0s ease-out;
transition: all 0s ease-out;
height:0 !important;
display: none;
}
Bootply鏈接(帶延遲): https ://www.bootply.com/9dFOT7Q2Ct
我在codepen上也做了同樣的事情,它工作得很好 - 它甚至沒有為#navbarNav添加內聯樣式所以可能是一個jquery問題(我使用推薦的jquery-3.2.1)
Codepen鏈接(由於某種原因沒有延遲): https ://codepen.io/janheder/pen/rGLJLb
您可能會遇到延遲,因為bootstrap會在show
之前將collapsing
類添加到導航欄以提供對動畫的更多控制。
如果您正在尋找平穩過渡,我相信這可能有所幫助: https : //www.bootply.com/rPqvbgcCVj
body {
overflow-x: hidden;
-webkit-transition: margin .3s ease;
-moz-transition: margin .3s ease;
-o-transition: margin .3s ease;
transition: margin .3s ease;
width: 100%;
margin: 0;
font-family: -apple-system,
BlinkMacSystemFont,
"Segoe UI",
Roboto,
"Helvetica Neue",
Arial,
sans-serif;
font-size: 1rem;
font-weight: 400;
line-height: 1.5;
color: #212529;
background-color: #fff;
}
.navbar-light .navbar-nav .nav-link {
padding-right: 1.5rem;
padding-left: 1.5rem;
position: relative;
}
.navbar .menu-item.menu-item-has-children > .nav-link:after {
content: "";
width: 0;
height: 0;
border-style: solid;
position: absolute;
right: 0;
top: 50%;
-ms-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
border-width: 4px 4px 0px 4px;
border-color: #007bff transparent transparent transparent;
}
/* Added the following code and removed previous code */
.collapsing {
transform: translateX(0%);
}
@media (max-width: 991px) {
body.active {
overflow: hidden;
height: 100%;
width: 100%;
margin-left: -280px;
}
.collapse.active {
transform: translateX(0%);
}
.navbar-collapse {
position: fixed;
right: 0px;
top: 0px;
display: block;
transform: translateX(100%);
height: 100vh;
width: 280px;
transition: transform .3s ease;
overflow-y: scroll;
background: #fff;
}
/* Added the following code */
.active.collapsing {
transform: translateX(0%);
}
.navbar .menu-item.menu-item-has-children > .nav-link:after {
right: 1.5rem;
}
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.