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

我尝试使用CSS转换结合

.addClass（）

和

.removeClass（）

创建一个滑块。到目前为止，它运行良好，除了一件事：

当我删除

.behind

并添加

.behinder

（对于一个类来说，这是一个愚蠢的名称）时，右侧的图像立即跳转到左侧，然后再次向右侧过渡

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

var slider=$（“#slider”）；
//向右
var slideRight=函数（）{
//开关状态
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'）。在（'click'，function（）上{
slideRight（）；
});
body，html{
利润率：0%5%；
}
#卡片滑块全宽{
显示：块；
宽度：80%；
高度：300px；
最大宽度：500px；
}
#滑块{
位置：相对位置；
}
#滑块式img{
位置：绝对位置；
排名：0；
z指数：10；
左：50%；
-webkit转换：所有1都易于输入输出；
过渡：所有1都易于输入输出；
}
#滑块式惯性中心{
z指数：50；
-webkit转换：translateX（-50%）；
转化：translateX（-50%）；
}
#后滑块{
z指数：30；
-webkit转换：translateX（-50%）量表（0.9）；
转换：translateX（-50%）量表（0.9）；
}
#左后滑块{
左边距：计算（（100%-200px）/3*-1）；
}
#右后滑块{
左边距：计算（（100%-200px）/3）；
}
#滑块式img.behinder{
z指数：10；
-webkit变换：translateX（0）尺度（0.8）；
变换：translateX（0）比例（0.8）；
}
#滑块img.behinder.left{
左：0；
右：自动；
左边距：计算（（100%-200px）/8*-1）；
}
#滑块img.behinder.right{
左：自动；
右：0；
保证金权利：计算（（100%-200px）/8*-1）；
}
#对{
填充：20px；
背景：#000；
显示：内联块；
颜色：#fff；
字体大小：粗体；
边缘底部：5px；
光标：指针；
}

开关，宝贝。
好的，实际上解决方案很简单。我使用了两个属性来定位元素：


左边距：x

transform:translateX（）


我曾经删除了
translateX（）完全，图像一直在跳跃。因此，为了解决这个问题，我只使用
左边距
对布局进行了重新排列，以偏移图像

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

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