javascript - jQuery幻灯片切换动画在调整大小时使其他元素跳动

因此，我尝试为从左侧滑入的侧边栏设置动画，该动画效果很好，但它使另一个元素（该元素使用flex进行大小调整）在自动调整大小时跳动。看起来是这样的：

这是我的一些CSS：

body{
display: flex;
}

#sidebar{
display: none;
float: left;
height: 100%;
position: relative;
padding-left: 20px;
padding-right: 20px;
}

#mainScreen{
float: right;
height: 100%;
flex-grow: 1;
display: flex;
flex-direction: column;
}

这是我的基本HTML结构：

<body>
<div id="sidebar>
<!-- stuff -->
</div>
<div id="mainScreen">
<div id="headerCont"><!-- stuff --></div>
<div id="messageCont"><!-- stuff --></div>
<div id="chatInputCont"><!-- stuff --></div>
</div>
</body>

#mainScreen的子级具有另一种伸缩方式，但垂直排列。在Javascript中，当您单击菜单按钮时，我正在使用$("#sidebar").toggle("slide", { direction: "left" }, 1000);，它几乎可以正常工作，但我只是想消除跳动。有谁知道如何解决此问题，或者是否有我没有想到的替代方法？

最佳答案

它实际上是浮动的问题，如果可能的话，它可以更好地重组HTML。

<body>
 <div class="main-content>
   <div class="left-section">
     <div id="sidebar>
      <!-- stuff -->
     </div>
   </div>
   <div class="right-section">
     <div id="mainScreen">
     <div id="headerCont"><!-- stuff --></div>
     <div id="messageCont"><!-- stuff --></div>
     <div id="chatInputCont"><!-- stuff --></div>
     </div>
   </div>
 </div>
</body>

现在删除float并在flex上使用.main-content。

的CSS

.left-section {
  position: absolute;
  top: 0;
  bottom: 0;
  left: -100%;
}

.left-section.slide {
  left: 0;
}

.main-content.slide {
  margin-left: 188px; // left-sidebar width
}

function sidebarClick(){
  $(".left-section, .main-content").toggleClass("slide");
}

关于javascript - jQuery幻灯片切换动画在调整大小时使其他元素跳动，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/53582145/