所以我尝试为从左侧滑入的侧边栏制作动画，动画效果很好，但它使另一个使用 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 的子元素有另一种 flex 排列，但垂直排列。在 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 并在 .main-content 上使用 flex。
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/