同一个动画在不同的方向需要更长的时间

Question

我有一个图像滑块，它会转到下一个/上一个图像。

问题是，当您单击上一图像按钮时，动画比单击下一个图像按钮所需的时间更长，并且两者的动画都相同！

你能告诉我为什么会发生这种情况？

的jsfiddle：
http://jsfiddle.net/v6d16jza/

HTML：

<div id="slider"> 
      <div id="setas-navegacao" style="position:absolute;height:100%;width:100%;"> 
       <i class="sprite-slider_ant" style="z-index:1;position:absolute;left:1.7%;top:50%;color:#ffa500;font-size:15pt;"><</i> 
       <i class="sprite-slider_prox" style="z-index:1;position:absolute;right:68.5%;top:50%;color:#ffa500;font-size:15pt;">></i> 
      </div> 
      <div class="slide slide_ativo" style="background-image:url('http://www.hdwallpapersimages.com/wp-content/uploads/2014/01/Winter-Tiger-Wild-Cat-Images-540x303.jpg');"> 

      </div> 

      <div class="slide" style="background-image:url('http://www.gettyimages.co.uk/gi-resources/images/Homepage/Category-Creative/UK/UK_Creative_462809583.jpg');"> 

      </div> 

      <div class="slide" style="background-image:url('http://7-themes.com/data_images/out/42/6914793-tropical-beach-images.jpg');"> 

      </div> 
     </div> 

CSS：

html{ 
    overflow: hidden; 
    width:100%; 
} 
div#slider{ 
    position:relative; 
    overflow: hidden; 
    width: 300%; 
    height:300px; 
} 

.slide{ 
    position:relative; 
    width:33.3%; 
    height:100%; 
    float:left; 
    background-size: cover; 
    -webkit-transform: translateZ(0); 
    -webkit-transition: margin-left 0.9s ease-out; 
    -moz-transition: margin-left 0.9s ease-out; 
    -o-transition: margin-left 0.9s ease-out; 
    transition: margin-left 0.9s ease-out; 
} 

的jQuery：

$(".sprite-slider_prox").on("click", function(){ 
    if($(".slide_ativo").next().is(".slide")){ 
     $(".slide_ativo").css("margin-left", "-100%").removeClass("slide_ativo").next().addClass("slide_ativo"); 
    } 
}); 

$(".sprite-slider_ant").on("click", function(){ 
    if($(".slide_ativo").prev().is(".slide")){ 
     $(".slide_ativo").removeClass("slide_ativo").prev().css("margin-left", "0%").addClass("slide_ativo"); 
    } 
}); 

Answer 1

你增加更多的保证金比它实际上是需要转变图像在左边。

您可以看到Chrome检查器发生了什么，在图像发生更改时将其悬停（将动画时间提高到更高的值会对您有所帮助）。您会注意到滑块开始向后移动之前的延迟花费了删除额外的余量。

我记录了调试的一个video。

如果更改：

.css("margin-left", "-100%") 

到：

.css("margin-left", "-33.333%") 

动画将正常工作（见fiddle）

另外请注意，我不得不删除padding和margin从html和body元素来实现正确的换档。