溢出的內容顯示了延遲

的jsfiddle：https://jsfiddle.net/9mg6vjaf/3 溢出的內容顯示了延遲

<div id="nav-icon3"> 
<span>Menu</span> 
</div> 


    <div id="#sideMenu" class="navigationLeft"> 

     <div class="flag"></div> 
    </div>

CSS

.navigationLeft { 
    width: 385px; 
    height: 100%; 
    background-color: #191919; 
    position: absolute; 
    top: 0; 
    display: none; 
    z-index: 9; 
} 

.flag { 
    position:absolute; 
    top:0;left:0; 
    width:500px; height:100%; 
    background-color: red; 
    transform-origin:0 0; 
    transform:skew(10deg); 
    z-index:-1; 
}

$('#nav-icon3').click(function(){ 
     $(this).toggleClass('open'); 
    }); 

    $('#nav-icon3').click(function() { 
    $('.navigationLeft').slideToggle(400); 
});

當我點擊「菜單」我想整個.navigationLeft滑入順利，但目前內容溢出顯示有些延遲。是什麼賦予了？

來源

2017-05-24 kulan

問題是的.navigationLeft小於width的.flag。因此，正如jQuery動畫一樣，它計算的寬度爲.navigationLeft，然後必須爲標誌寬度「重新計算」。爲了防止這種情況發生，您需要確保標誌的容器具有足夠的寬度以在完全展開時覆蓋。

給導航較大的寬度（在這種情況下100%）解決了這個問題：

$('#nav-icon3').click(function() { 
 
    $(this).toggleClass('open'); 
 
}); 
 

 
$('#nav-icon3').click(function() { 
 
    $('.navigationLeft').slideToggle(400); 
 
});

.navigationLeft { 
 
    width: 100%; 
 
    height: 100%; 
 
    background-color: #191919; 
 
    position: absolute; 
 
    top: 0; 
 
    display: none; 
 
    z-index: 9; 
 
} 
 

 
.flag { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    width: 500px; 
 
    height: 100%; 
 
    background-color: red; 
 
    transform-origin: 0 0; 
 
    transform: skew(10deg); 
 
    z-index: -1; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="nav-icon3"> 
 
    <span>Меню</span> 
 
</div> 
 
<div id="#sideMenu" class="navigationLeft"> 
 
    <div class="flag"></div> 
 
</div>

希望這有助於！ :)

來源

2017-05-24 21:47:06

其實，我不想整頁爲黑色。我將編輯我的jsfiddle，以便更清楚。 – kulan

我更新了小提琴。所以現在我想讓我的.navigationLeft在你點擊「菜單」時看它的樣子，這只是我想擺脫溢出區域的延遲。 – kulan

如果你可以用另一個不帶背景的不可見包裝包裝該部分，那麼它將解決你的目的。

沒有大於歪斜的包裝寬度，這是不可能的。

<div id="nav-icon3"> 
    <span>Меню</span> 
    </div> 

    <div class="wrapper"> 
     <div id="#sideMenu" class="navigationLeft"> 


     </div> 
     <div class="flag"></div> 
    </div> 


.navigationLeft { 
    width:385px; 
    height: 100%; 
    background-color: #191919; 
    position: absolute; 
    top: 50px; 
    display: none; 
    z-index: 9; 
} 

.flag { 
    position:absolute; 
    top:50px;left:0; 
    width:500px; height:100%; 
    background-color: red; 
    transform-origin:0 0; 
    transform:skew(10deg); 
    display: none; 
    z-index: 10; 
} 
.wrapper { 
    width: 600px; 
    position: relative; 
    height: 100vh; 
} 
#nav-icon3{ 
    display: block; 
}

https://jsfiddle.net/karthick6891/9mg6vjaf/4/

來源

2017-05-24 21:57:43 karthick

喬的答案會奏效 – karthick

jQuery的方法.slideToggle應用CSS規則：溢出：隱藏的元素，而它的動畫。您可以通過添加溢出來強制重寫：visible！important;到您的.navigationLeft類。

.navigationLeft { 
    overflow: visible !important; 
    /*... other css rules */ 
}

更新小提琴https://jsfiddle.net/9mg6vjaf/5/

來源

2017-05-24 22:05:45

溢出的內容顯示了延遲

回答

相關問題