溢れコンテンツが遅延

Question

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

JS

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

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

私は "メニュー" をクリックすると、私は全体.navigationLeftがスムーズにスライドします現在のところ、あふれているコンテンツが少し遅れて表示されています。何がありますか？

Answer 1

widthが.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>

は、この情報がお役に立てば幸い！ :)

Answer 2

セクションをバックグラウンドのない非表示のラッパーでラップすることができれば、目的を解決できます。

スキューよりも大きいラッパーの幅を持たない場合、それを行うことはできません。オーバーフロー：それはアニメーション化しながら、要素に隠さ

<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/

Answer 3

jqueryの方法.slideToggleは、CSSルールを適用します。オーバーフローを追加することで強制的にオーバーライドできます：visible！important; .navigationLeftクラスに追加します。

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

更新フィドルhttps://jsfiddle.net/9mg6vjaf/5/