使用jquery / css隐藏元素

Question

I'm trying to hide the sidebar to a negative right (-205px) so I can get an effect where the content wrapper and sidebar move at the same time.

The problem is that the sidebar is still being shown on the right? I though I could hide it sending it "outside" the web page. I can't simply use display block none and block on the sidebar because it will not make a smooth animation

  var rightSidebarOpen = false; $('#toggle-right-sidebar').click(function () { if(rightSidebarOpen) { $('#sidebar-right').css('right', '-205px'); $('.content-wrapper').css('margin-right', "0"); $('.full-page-wrapper').css('margin-right', "0"); } else { $('#sidebar-right').css('right', '0'); $('.content-wrapper').css('margin-right', "205px"); $('.full-page-wrapper').css('margin-right', "205px"); } rightSidebarOpen = !rightSidebarOpen; }); 

 .content-wrapper { background: #fff; min-height: 100vh; padding: 1rem 1.5rem 4rem; transition: all .7s ease; position: relative; background: black; } #sidebar-right { background: #fafafa; border-left: 1px solid #e5e5e5; width: 200px; height: 100%; position: absolute; top: 0; right: -205px; overflow-x: hidden; transition: left 1s ease; background: red; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="sidebar-right" class="visible"> <ul class="sidebarList"> <li> </li> </ul> </div> <div class="content-wrapper"> <button id="toggle-right-sidebar">CLICK ME</button> </div> 

Answer 1

You need to transition the right CSS property on the sidebar, because that's the one you're changing.

#sidebar-right {
    transition: right 1s ease;
}

Answer 2

Adding correct type of transition with equal time for both #sidebar-right and .content-wrapper would solve your issue. Try this code.

.content-wrapper {
    background: #fff;
    min-height: 100vh;
    padding: 1rem 1.5rem 4rem;
    transition: all .7s ease;
    position: relative;
    background: black;
}

#sidebar-right {
    background: #fafafa;
    border-left: 1px solid #e5e5e5;
    width: 200px;
    height: 100%;
    position: absolute;
    top: 0;
    right: -205px;
    overflow-x: hidden;
    background: red;
    transition: all 0.7s ease;
}

Answer 3

#sidebar-right {
    transition: all 1s ease;
}

'all' enable to use transition on all property

Answer 4

将overflow-x:hidden到您的外部容器中