將DIV關閉屏幕而不妨礙寬度？

我有一個我正在使用的電子商務購物車，當點擊一個按鈕時，購物車從屏幕左側滑出。我有那部分工作正常。將DIV關閉屏幕而不妨礙寬度？

<section class="ec-cart"> 
    <h3>Cart</h3> 
</section> 

<div class="main-content"> 
    <div class="overlay-wrap"></div> 
    <p>Text text text</p> 
    <a class="cart-btn" href="#">Your Cart</a> 
</div>

當點擊.cart-btn環節，.ec-cart滑出罰款，但.main-content就像我需要它不會關閉屏幕的滑動。我需要它來保持相同的寬度，只需滑動屏幕右側的數量與車寬相同。

這個js小提琴示例顯示我有：http://jsfiddle.net/RNmaq/

如上的jsfiddle例子看出，當車進入視野的容器的寬度收縮。

此網站顯示我要去的地方。如果點擊右上角的購物車按鈕： http://bit.ly/1gJiy1a

我通過切換類實現了迄今的效果。如果有更簡單的方法可以做到這一點，我願意接受其他建議。任何幫助將不勝感激。

來源

2014-04-01 Tom Nolan

設置主含量爲100％

.main-content { 
    transition:left .5s; 
    background:#f1f1f1; 
    width:100%; 
}

這裏的寬度是小提琴 http://jsfiddle.net/RNmaq/4/

來源

2014-04-01 03:21:04

非常感謝你。任何想法爲什麼CSS轉換不會在第二個切換？什麼時候關閉？ http://jsfiddle.net/RNmaq/8/ –

你看到了什麼問題？ –

的.main-content寬度設置爲100%這樣的：

.main-content { 
    transition:left .5s; 
    background:#f1f1f1; 
    width: 100%; 
}

修復它。 See fiddle

來源

2014-04-01 03:21:01

你可以使用CSS3 transform:translateX();風格

.main-content { 
    transition:all .5s; 
    background:#f1f1f1; 
} 
.main-content-dis { 
    position:fixed; 
    -moz-transform: translateX(30%); 
    -webkit-transform: translateX(30%); 
    -o-transform: translateX(30%); 
    -ms-transform: translateX(30%); 
    transform: translateX(30%); 
}

http://jsfiddle.net/RNmaq/6/

同樣，如果你能應用到translateX您的購物車款，使他們很好地過渡一起定時：使用translateX

.ec-cart { 
    width:30%; 
    position:fixed; 
    -moz-transform: translateX(-100%); 
    -webkit-transform: translateX(-100%); 
    -o-transform: translateX(-100%); 
    -ms-transform: translateX(-100%); 
    transform: translateX(-100%); 
    height:100%; 
    z-index:5000; 
    background:#f1f1f1; 
    transition:all .5s; 
} 
.ec-cart-active { 
    -moz-transform: translateX(0); 
    -webkit-transform: translateX(0); 
    -o-transform: translateX(0); 
    -ms-transform: translateX(0); 
    transform: translateX(0); 
}

搗鼓兩個：http://jsfiddle.net/RNmaq/7/

來源

2014-04-01 03:22:41 haxxxton

將DIV關閉屏幕而不妨礙寬度？

回答

相關問題