过渡动画：全部；右边距的奇怪延迟

Question

我有一个简单的应用程序，当您单击右侧时，右侧部分进入，当您单击左侧时，左侧部分进入。它就像一个旋转木马，代码更少，动画完全基于 CSS。

现在当我点击右键时，动画是即时的。在左侧，它需要几秒钟才能开始。

HTML：

<div class="wrap">
<div class="box box1"></div>
<div class="box box2"></div>
</div>

CSS：

body{overflow:hidden}
.wrap{width:2500px;overflow:hidden}
.box{height:20px;width:20%;background:red;margin:20px 8px;float:left;

-webkit-transition: all 2s;
  transition: all 2s;
}

JS：

$(document).keyup(function (e) {
    var c = (e.keyCode ? e.keyCode : e.which);
    e.preventDefault;
    if (c == 39) {
      $(".box1").css("margin-left", "-100%");        
    }
    if (c == 37) {
      $(".box1").css("margin-left", "0");
    }
});

是否与溢出有关？是bug吗？

jsFiddle：http://jsfiddle.net/dp8VS/1/

Answer 1

.css("margin-left", "-100%") 将其容器的.box1 的左边距设置为100%（即在这种情况下为2500px），因此转换不会被延迟，只是div 需要一段时间进入视野。

由于您的 div 使用宽度为 20%，请尝试：

$(document).keyup(function (e) {

    e.preventDefault();

    if (e.which === 39) {
        $(".box1").css("margin-left", "-20%");
    } else if (e.which === 37) {
        $(".box1").css("margin-left", "0");
    }

});

另外，jQuery 对event object 中的许多属性进行了“规范化”，所以我刚刚使用e.which 来获取关键代码。

魔法：http://jsfiddle.net/EThDb/3/