我正在尝试制作一个在按下按钮时显示的侧边栏。 一切正常，直到我在侧边栏中添加了一些内容。侧边栏显示时背景会跳动。
示例代码如下:
document.getElementById('btn').addEventListener('click', ()=>{
let sidebar = document.getElementById('sidebar');
sidebar.style.width = '40vw';
let p = document.querySelector('#sidebar p');
p.style.display = 'block';
}) *{
margin: 0;
padding: 0;
}
#main{
display: flex;
}
#sec1{
width: 60vw;
height: 100vh;
background: red;
}
#sec2{
width: 40vw;
height: 100vh;
background-color: #bdd9d4;
}
#sidebar{
width: 0;
height: 100vh;
position: absolute;
top: 0;
right:0;
z-index: 1;
transition: width .5s;
background: green;
}
#sidebar p{
display: none;
}<div id="main">
<div id="sec1">
<button id="btn">Open Sidebar</button>
</div>
<div id="sec2">
</div>
</div>
<div id="sidebar">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Laboriosam sapiente amet similique? Architecto dolor, nulla neque natus incidunt labore dignissimos? Mollitia reprehenderit rerum unde iusto, consequatur explicabo molestiae cumque vero!</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit doloremque sit delectus exercitationem reiciendis? Sunt, dolore ut cum, quod aliquam porro et similique, deleniti voluptatum neque maiores sed! Optio, fugit ipsam sequi quae incidunt pariatur hic deleniti! Eos atque vel praesentium delectus necessitatibus illo, iste officia modi nobis, est voluptatem sequi a quo quae quidem labore architecto magni aspernatur? Doloremque, libero fugiat accusantium asperiores aspernatur officiis numquam velit ullam dolore aliquam vitae tenetur, eaque vel deleniti! Eum magni officiis nihil?</p>
</div>如何在不删除内容的情况下停止跳转？ 我还尝试使用不同的显示和可见性来隐藏元素。
最佳答案
如前面的答案所述，您的内容跳跃是因为您正在为 width 设置动画。的容器。其中的内容(文本)将始终尝试适合，这就是您具有这种效果的原因。
为了防止这种情况，不要为 width 设置动画。 ，但为位置设置动画。
#sidebar{
width: 0;
height: 100vh;
position: absolute;
top: 0;
right:0;
z-index: 1;
transition: transform .5s; /* modified */
background: green;
transform: translateX(120%); /* added */
}
#sidebar.showSidebar {
transform: translateX(0);
}
从您的代码中删除此部分:
#sidebar p{
display: none; /* need to remove this from your code */
}
您可能还需要添加 overflow-x: hidden如果出现水平滚动条，则添加到侧边栏的父元素(在本例中为 <body>)。
这是唯一需要的 JS:
document.getElementById('btn').addEventListener('click', function(){
document.getElementById('sidebar').classList.add('showSidebar');
});
隐藏.sidebar同样，您只需要删除 .showSidebar类:
document.getElementById('sidebar').classList.remove('showSidebar');
使用 transform: translate()在 CSS 过渡中比使用“宽度”或“正确”更有效，因为它不会导致布局/重排(重新计算整个元素的大小和/或位置)。它与不透明度是仅有的两个仅影响网页呈现的“合成”部分的可转换属性。
high-performance-animations article - 完全相同的原则也适用于转换。
关于javascript - 显示内容侧边栏的背景 "Jumps"，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55893942/