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

当我点击＆＃34;菜单＆＃34;我想要整个.navigationLeft幻灯片顺利播放，但目前溢出的内容显示有一些延迟。是什么给了什么？

Answer 1

jquery方法.slideToggle在动画时将css规则：overflow：hidden应用于元素。您可以通过添加overflow：visible！important来强制覆盖它;你的.navigationLeft课程。

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

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

Answer 2

问题是width的{{1}}小于.navigationLeft的{{1}}。因此，当jQuery动画时，它计算宽度width，然后必须'重新计算'标志宽度。为了防止这种情况发生，您需要确保标志的容器在完全展开时有足够的宽度覆盖。

为导航提供更大的宽度（在本例中为.flag）可解决问题：

.navigationLeft

100%

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

希望这有帮助！：）

Answer 3

如果您可以使用另一个不带背景的隐形包装来包装该部分，那么它将解决您的目的。

如果没有比歪斜更大的包装宽度，则无法做到这一点。

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

溢出的内容显示有延迟

3 个答案: