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小提琴示例显示了我的内容：http://jsfiddle.net/RNmaq/

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

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

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

Answer 1

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

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

这是一个小提琴 http://jsfiddle.net/RNmaq/4/

Answer 2

将.main-content的宽度设置为100%，如下所示：

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

修复它。 See fiddle

Answer 3

您可以使用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应用到购物车部分，以便他们可以很好地定时合并：

.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);
}

使用translateX：http://jsfiddle.net/RNmaq/7/

进行操作

将DIV移出屏幕而不会弄乱宽度？

3 个答案: