jquery - 内容溢出显示延迟

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幻灯片都可以顺畅地滑动，但是当前溢出的内容会延迟显示。是什么赋予了？

最佳答案

jQuery方法.slideToggle将css规则：动画时隐藏到元素上。您可以通过添加溢出来强制覆盖此设置：visible！important;到您的.navigationLeft类。

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

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