Question

我试图制作一个边栏，该边栏在按下按钮时显示出来。一切正常，直到我在侧栏中添加了一些内容。侧边栏显示后，背景就会跳开。

这是示例代码：

 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>

如何在不删除内容的情况下停止跳转？我还尝试过使用各种显示方式和可见性来隐藏元素。

Answer 1

“跳转”是由以下事实引起的：当您单击按钮时，文本的偏移宽度不能真正适合正在增长的div。换句话说，有一个瞬间，其中包含文本的div大约为1px，而您的文本确实更大。因此，有许多解决方案，包括：

隐藏文本溢出（可能会起作用，但当div增大时，文本仍会“跳舞”）

我在想类似的东西：

   #sidebar p{
       display: none;
       overflow: hidden;
   }

在显示文本之前放置一个延迟，以便div有足够的时间来容纳文本：）

 document.getElementById('btn').addEventListener('click', ()=>{
     let sidebar = document.getElementById('sidebar');
     sidebar.style.width = '40vw';
     let div = document.querySelector('#sidebar div');

     let text = div.children[0].innerText;
     div.children[0].innerText = "";
     div.style.display = 'block';

     setTimeout(()=>{
       div.children[0].innerText = text;
     }, 500)
 })

*{
        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 div{
        display: none;
    }

<div id="main">
    <div id="sec1">
        <button id="btn">Open Sidebar</button>
    </div>
    <div id="sec2">
    </div>
       
</div>

<div id="sidebar">
<div>
  <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>
</div>
  
</div>

Answer 2

如先前的回答所述，您的内容跳跃是因为您正在为容器的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');

在CSS过渡中使用transform: translate()比使用'width'或'right'更有效，因为它不会引起布局/重排（重新计算整个元素的大小和/或位置）。它与不透明度一起是仅有的两个可转换属性，仅影响网页渲染的“组成”部分。

high-performance-animations article-完全相同的原理也适用于过渡。

Answer 3

与以前的尝试相比，我有一个更优雅的解决方案，由于它导致不必要的滚动条，因此我删除了它。只需为宽度固定的边栏内容添加子DIV，并将溢出隐藏在边栏上即可。边栏的宽度可以增加，以显示固定的内容，该内容被溢出隐藏。有什么好处吗？

 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;
        overflow: hidden;
        top: 0;
        right:0;
        z-index: 1;
        transition: width .5s;
        background: green;
    }

    #sidebar-contents {
        width: 40vw;
    }


    #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">
   <div id="sidebar-contents">
      <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>
</div>

带有内容的侧边栏上的背景“跳转”

3 个答案: