过渡动画:全部;边距右边距的奇怪延迟

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

与溢出有关吗？这是一个错误吗？

js小提琴：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"规范化"了事件对象中的许多属性，所以我只是使用e.which来获取键代码。

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