左侧CSS3过渡

Question

我回过头来，这次尝试使用CSS3过渡代替基于jQuery的过渡，使用Modernizr作为浏览器兼容性的备份。

我正在使用以下内容设置我的基类：

.box { transition: left 0.5s ease; }
.box-left { left: calc(left - 300px); }
.box-right { left: calc(left + 300px); }

在jQuery中，当点击“下一个”或“上一个”按钮时，我正在使用toggleClass。

您可以看到我正在尝试添加或减去当前的左值，但显然不会那样。

任何指针？我希望我对我的问题足够清楚。

谢谢！

编辑：

我给了calc（）一个镜头，但我不知道会在操作员的左侧发生什么。

Answer 1

我找到了解决方案。所以，和以前一样，我在CSS中定义过渡：

.box { transition: left 0.5s ease; left: 0px; }

但是，当需要动画时，我使用jQuery来更新带有计算左值的样式属性：

$('.box').css({'left':-(currentLeft) * multiplier});