javascript - 将 DIV 移出屏幕而不影响宽度？

Question

我有一个正在处理的电子商务购物车，当单击一个按钮时，购物车会从屏幕左侧滑出。我的那部分工作正常。

<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 Fiddle 示例展示了我所拥有的:http://jsfiddle.net/RNmaq/

如上面的 JSFiddle 示例所示，当购物车进入视野时，容器的宽度会缩小。

这个网站展示了我的目标。如果您点击右上角的购物车按钮: http://bit.ly/1gJiy1a

到目前为止，我是通过切换类来实现这些效果的。如果有更简单的方法可以做到这一点，我愿意接受其他建议。任何帮助将不胜感激。

Answer 1

将主要内容的宽度设置为 100%

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

这是一个 fiddle http://jsfiddle.net/RNmaq/4/