Question

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

这是我的一些CSS：

Rigidbody.position

这是我的基本HTML结构：

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

#mainScreen的子级具有另一种伸缩方式，但垂直排列。在Javascript中，当您单击菜单按钮时，我使用的是<body> <div id="sidebar>  </div> <div id="mainScreen"> <div id="headerCont"></div> <div id="messageCont"></div> <div id="chatInputCont"></div> </div> </body>，它几乎可以正常工作，但是我只是想消除跳动。有谁知道如何解决此问题，或者是否有我没有想到的替代方法？

Answer 1

实际上是浮动问题，如果可能的话，它可以更好地重组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");
}

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

1 个答案: