javascript - 添加 Transition 正在更改 Jquery 设置的位置

Question

好的，所以如果我不向 .slide 类添加过渡属性，这个示例就可以正常工作。如果我添加此过渡属性，则通过 jquery 设置的 right 属性不会按预期工作。加减太多了。

代码如下:

$(function(){
  $("#with-transition").click(function() {
    $(document.body).toggleClass("with-transition", this.value);
  }).trigger("click");
  var curSlide = 0;
  $('.arrow-left').click(function(){
  
  var $slideContainer = $('.slides');
  var $slide = $slideContainer.find('.slide');
  
  curSlide++;
  if(curSlide === $slide.length){
    $slide.css({"right":"-=200%"});
    curSlide = 0;
  } else {
    $slide.css({"right":"+=100%"});
  } 
});
})

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: #efefef;
  position: relative;
}

.container {
  width: 600px;
  height: 300px;
  background-color: #17A05E;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}

.slides {
  width: 100%;
  height: 100%;
  position: relative;
}
body.with-transition .slide {
  -webkit-transition: all 400ms ease-in;
  transition: all 400ms ease-in;
}
.slide1, .slide2, .slide3 {
  width: 600px;
  height: 200px;
  position: absolute;
}

.slide1 {
  background-color: #DD4E42;
  right: -200%;
}

.slide2 {
  background-color: #DF6026;
  right: -100%;
}

.slide3 {
  background-color: #F1990D;
  right: 0;
}

.nav {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  z-index: 1000;
}
.nav .arrow-left, .nav .arrow-right {
  width: 50px;
  height: 50px;
  background-color: rgba(255, 255, 255, 0.4);
  position: absolute;
  -webkit-transition: all 200ms ease-in-out;
  transition: all 200ms ease-in-out;
}
.nav .arrow-left {
  left: 0;
}
.nav .arrow-right {
  right: 0;
}

.arrow-left:hover, .arrow-right:hover {
  background-color: rgba(255, 255, 255, 0.9);
}

<label><input type="checkbox" id="with-transition"> Include transition</label>
<div class="container">
  <div class="slides">
    <div class="slide slide1"></div>
    <div class="slide slide2"></div>
    <div class="slide slide3"></div>
  </div>
  <div class="nav">
    <div class="arrow-left"></div>
    <div class="arrow-right"></div>
  </div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>

当您单击左下方较浅的橙色框时，就会发生转换。为了检查差异，在勾选和不勾选复选框的情况下都尝试一下，这决定了是否包含过渡。现在，我想要的是，如何使这段代码在有过渡的情况下工作，就像它在没有过渡的情况下工作一样。

这里我添加了检查元素的快照: 1) - 无过渡

2) - 有过渡

最后是笔:Check it out here as well

Answer 1

所以，我无法用百分比解决这个问题。如果我在正确的属性中使用像素而不是百分比，那么它可以很好地处理过渡，否则它会向正确的属性添加太多内容。

但我现在所做的是使用 transform: translate(x,y) 属性来解决这个问题。

它按预期和我想要的方式工作。除了相对于它的位置移动它之外，我创建了一个名为 xPos 的新变量，并赋予它 100 的值，并在我的 translate (x) 属性中使用了这个变量。

这是这个较新版本的 Jquery:

$(function(){
  var curSlide = 0;
  var xPos = 100;
  $('.arrow-left').click(function(){

    var $slideContainer = $('.slides');
    var $slide = $slideContainer.find('.slide');

    curSlide++;
    if(curSlide === $slide.length){
      $slide.css({'transform':'translate('+(xPos-xPos)+'%, 0)'});
      curSlide = 0;
      xPos = 100;
    } else {
      $slide.css({'transform':'translate(-'+xPos+'%, 0)'});
      xPos = xPos + 100;
    } 
 });
});

尽管如此，如果有人知道为什么当我在正确的属性上使用百分比以及 css 转换时会出现这种奇怪的行为，我会非常乐意知道!