如何防止css变换动画跳跃？

Question

我尝试使用CSS变换与.addClass()和.removeClass()结合创建滑块。到目前为止它工作正常，除了一件事：

当我删除.behind并添加.behinder（这是一个类的愚蠢名称）时，右侧的图像立即跳转到左侧，而不是再次向右转移。

这会导致某种“闪烁”，正如您在此代码段中所看到的那样：

var slider = $('#slider');

// to the right
var slideRight = function() {
  
  // switch state
  var dumb = slider.find('.behinder.left');
  slider.find('.behinder.right').removeClass('right').addClass('left');
  slider.find('.behind.right').removeClass('behind').addClass('behinder');
  slider.find('.center').removeClass('center').addClass('behind right');
  slider.find('.behind.left').removeClass('behind left').addClass('center');
  dumb.removeClass('behinder').addClass('behind');
}

$('#right').on('click', function(){
  slideRight();
});

body, html {
  margin: 0% 5%;
}

#card-slider-fullwidth {
  display: block;
  width: 80%;
  height: 300px;
  max-width: 500px;
}

#slider {
  position: relative;
}
#slider img {
  position: absolute;
  top: 0;
  z-index: 10;
  left: 50%;
  -webkit-transition: all 1s ease-in-out;
  transition: all 1s ease-in-out;
}
#slider img.center {
  z-index: 50;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
}
#slider img.behind {
  z-index: 30;
  -webkit-transform: translateX(-50%) scale(0.9);
          transform: translateX(-50%) scale(0.9);
}
#slider img.behind.left {
  margin-left: calc( (100% - 200px) / 3 * -1);
}
#slider img.behind.right {
  margin-left: calc( (100% - 200px) / 3);
}
#slider img.behinder {
  z-index: 10;
  -webkit-transform: translateX(0) scale(0.8);
          transform: translateX(0) scale(0.8);
}
#slider img.behinder.left {
  left: 0;
  right: auto;
  margin-left: calc( (100% - 200px) / 8 * -1);
}
#slider img.behinder.right {
  left: auto;
  right: 0;
  margin-right: calc( (100% - 200px) / 8 * -1);
}

#right {
  padding: 20px;
  background: #000;
  display: inline-block;
  color: #fff;
  font-weight: bold;
  margin-bottom: 5px;
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="right">Switch, baby.</div>

<div id="card-slider-fullwidth">
  <div id="slider">
    <img src="https://unsplash.it/200/300/?image=100" alt="100" class="behinder left">
    <img src="https://unsplash.it/200/300/?image=200" alt="200" class="behind left">
    <img src="https://unsplash.it/200/300/?image=320" alt="300" class="center">
    <img src="https://unsplash.it/200/300/?image=400" alt="400" class="behind right">
    <img src="https://unsplash.it/200/300/?image=500" alt="500" class="behinder right">
  </div>
</div>

我该如何解决这个问题？

还有 CODEPEN DEMO 。

Answer 1

好的，实际上解决方案非常简单。我使用了两个属性来定位元素：

• margin-left: x;
• transform: translateX();

有一次我完全删除了translateX();，图像一直在跳跃。因此，要解决此问题，我仅使用margin-left重新排列布局以偏移图像。

您可以通过更新scss来检查工作解决方案：

img {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    transition: all .3s ease-in-out;

    &.center {
      z-index: 50;
      margin-left: 0;
    }

    &.behind {
      z-index: 30;
      margin-left: -20px;
      transform: translateX(-50%) scale(.9);

      &.right {
        margin-left: 20px;
      }
    }

    &.behinder {
      z-index: 10;
      margin-left: -40px;
      transform: translateX(-50%) scale(.8);

      &.right {
        margin-left: 40px;
      }
    }
  }