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柔性側欄幻燈片

回答

相關問題