0

我试图将侧边栏隐藏到负数（-205px），这样我可以获得内容包装器和侧边栏同时移动的效果。

问题是侧边栏仍然显示在右侧？我虽然可以隐藏它，将它发送到网页“外部”。我不能简单地在侧边栏上使用 display block none 和 block ，因为它不会制作流畅的动画

 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>

4

4 回答 4

1

您需要转换right侧边栏上的 CSS 属性，因为这是您要更改的属性。

#sidebar-right {
    transition: right 1s ease;
}
于 2018-05-02T15:42:15.687 回答
1

为两者添加具有相同时间的正确类型的转换，#sidebar-right将.content-wrapper解决您的问题。试试这个代码。

.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;
}
于 2018-05-02T15:50:04.030 回答
1 
#sidebar-right {
    transition: all 1s ease;
}

'all' 允许在所有属性上使用转换

于 2018-05-02T15:53:00.837 回答
1

添加overflow-x:hidden到您的外部容器

于 2018-05-02T16:03:30.600 回答