jquery - 过渡动画 : all; Weird delay on margin-right

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

与溢出有关吗？是错误吗？

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

Answer 1

.css("margin-left", "-100%") 将 .box1 的左边距设置为 100%它的容器(即本例中的 2500px)所以过渡没有被延迟，只是 div 需要一段时间才能进入 View 。

由于您为 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/