Css柔性侧栏幻灯片

我试图滑出侧边栏并拉内容，但我的代码只有前者。我尝试过对内容进行动画制作，但它保持其宽度并且不展开。Css柔性侧栏幻灯片

相当新的flex。

HTML：

<div class="wrapper"> 
    <div class="sidebar open"> 

    </div> 
    <div class="content"> 
    <a id="toggle" href="#">Toggle</a> 
    </div> 
</div>

CSS：

body, 
html { 
    height: 100%; 
} 

.wrapper { 
    position: relative; 
    display: -webkit-box; 
    display: -ms-flexbox; 
    display: flex; 
    -webkit-box-orient: horizontal; 
    -webkit-box-direction: normal; 
    -ms-flex-direction: row; 
    flex-direction: row; 
    -webkit-box-flex: 1; 
    -ms-flex: 1; 
    flex: 1; 
    height: 100%; 
    width: 900px; 
    background: blue; 
    margin: auto; 
    overflow: hidden; 
} 

.sidebar { 
    background: green; 
    width: 300px; 
    -webkit-transition-duration: .3s; 
    transition-duration: .3s; 
    bottom: 0; 
    left: 0; 
    right: 0; 
    top: 0; 
    -webkit-border-top-left-radius: 4px; 
    -webkit-border-bottom-left-radius: 4px; 
    -moz-border-radius-topleft: 4px; 
    -moz-border-radius-bottomleft: 4px; 
    border-top-left-radius: 4px; 
    border-bottom-left-radius: 4px; 
} 

.sidebar.open { 
    position: static; 
    display: -webkit-box; 
    display: -ms-flexbox; 
    display: flex; 
    -webkit-transform: translate3d(0, 0, 0); 
    transform: translate3d(0, 0, 0); 
} 

.sidebar.closed { 
    -webkit-transform: translate3d(-100%, 0, 0); 
    transform: translate3d(-100%, 0, 0); 
    //display: none; 
} 

.content { 
    background: red; 
    min-width: 0; 
    -webkit-box-orient: vertical; 
    -webkit-box-direction: normal; 
    -ms-flex-direction: column; 
    flex-direction: column; 
    display: -webkit-box; 
    display: -ms-flexbox; 
    display: flex; 
    -webkit-box-flex: 1; 
    -ms-flex: 1; 
    flex: 1; 
}

JS：

$('#toggle').on('click', function(e) { 
    e.preventDefault(); 
    $('.sidebar').toggleClass('open closed'); 
});

来源

2017-04-10 Jack

梢一天的伎俩：'开放closed'类是没有意义的。你只需要一个默认状态并且只需要一个特殊的类。不是两个:) –

谢谢，它原本只有默认的状态和特殊的类，但我正在玩的东西早些时候，忘了把它回来:) – Jack

你能让我知道什么是我的答案缺失，所以我可以调整并接受。 – LGSon

由于transform不动任何其他内容比本身，它赢得“T推动content元素。

一个选项是使用margin-left来做到这一点。

Updated codepen

栈片断

$('#toggle').on('click', function(e) { 
 
    e.preventDefault(); 
 
    $('.sidebar').toggleClass('open'); 
 
});

body, 
 
html { 
 
    height: 100%; 
 
} 
 

 
.wrapper { 
 
    position: relative; 
 
    display: -webkit-box; 
 
    display: -ms-flexbox; 
 
    display: flex; 
 
    -webkit-box-orient: horizontal; 
 
    -webkit-box-direction: normal; 
 
    -ms-flex-direction: row; 
 
    flex-direction: row; 
 
    height: 100%; 
 
    width: 900px; 
 
    background: blue; 
 
    margin: auto; 
 
    overflow: hidden; 
 
} 
 

 
.sidebar { 
 
    position: relative; 
 
    background: green; 
 
    width: 300px; 
 
    -webkit-transition-duration: .3s; 
 
    transition-duration: .3s; 
 
    margin-left: -300px; 
 
    -webkit-border-top-left-radius: 4px; 
 
    -webkit-border-bottom-left-radius: 4px; 
 
    -moz-border-radius-topleft: 4px; 
 
    -moz-border-radius-bottomleft: 4px; 
 
    border-top-left-radius: 4px; 
 
    border-bottom-left-radius: 4px; 
 
} 
 

 
.sidebar.open { 
 
    margin-left: 0; 
 
} 
 

 
.content { 
 
    background: red; 
 
    min-width: 0; 
 
    -webkit-box-orient: vertical; 
 
    -webkit-box-direction: normal; 
 
    -ms-flex-direction: column; 
 
    flex-direction: column; 
 
    display: -webkit-box; 
 
    display: -ms-flexbox; 
 
    display: flex; 
 
    -webkit-box-flex: 1; 
 
    -ms-flex: 1; 
 
    flex: 1; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="wrapper"> 
 
    <div class="sidebar"> 
 

 
    </div> 
 
    <div class="content"> 
 
    <a id="toggle" href="#">Toggle</a> 
 
    </div> 
 
</div>

来源

2017-04-10 17:46:05 LGSon

Css柔性侧栏幻灯片

回答

相关问题