Javascript 由于在间隔之间运行其他代码，因此具有setInterval功能的间隔不均匀；

我试图让一个div使用纯JS在React项目中做一个简单的幻灯片到父div中，但是幻灯片的平滑度有问题。当我记录控制台日志时，我可以看到当代码（slideIn）运行时，在setInterval调用之间，React运行的其他代码占用的时间比指定的时间间隔要多。因此，间隔不均匀，这似乎是造成幻灯片抖动的原因

我也尝试过requestAnimationFrame，但结果是一样的

挑战似乎是使slideIn连续，而不必在运行时运行其他代码，但是如何做到这一点呢

 <div className="outer-box">
    <div className="sliding-box"></div>
 </div>

  .outer-box {
    width: 300px;
    height: 200px;
    position: relative;
  }

  .sliding-box {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
  }

  slideIn() {
    const moveElemment = document.getElementById('sliding-box');
    const pos = -100;
    if (moveElemment) {
      const id = setInterval(frame, 10);
      function frame() {
        if (pos == 0) {
          clearInterval(id);
        } else {
          pos++;
          moveElemment.setAttribute('style', `left: ${pos}%`);
        }
      }
    }
  }

.外箱{
宽度：300px；
高度：200px；
位置：相对位置；
}
.滑箱{
宽度：100%；
身高：100%；
位置：绝对位置；
排名：0；
}
slideIn（）{
const moveElement=document.getElementById（'slidel-box'）；
常数pos=-100；
如果（移动元素）{
const id=设置间隔（第10帧）；
函数框架（）{
如果（位置==0）{
清除间隔（id）；
}否则{
pos++；
setAttribute（'style'，'left:${pos}%`）；
}
}
}
}

Perphas您可以利用CSS转换来实现与JS线程分离的更平滑的动画，以解决您的问题吗？例如，您可以使用

转换

规则和其他选择器更新CSS，如下所示：

.sliding-box {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: -100px; // Initial position of sliding-box
    transition: left 1s linear; //Specify the animation behaviour
}
.sliding-box.in {
    left: 0px; // Position of sliding-box after animation
}

slideIn() {
    const moveElemment = document.getElementById('sliding-box');
    if (moveElemment) {
      // When this selector is added, it triggers the animation
      // transition from left:-100px to left:0px over a 1 second 
      // interval
      moveElemment.classList.add('in'); 
    }
  }

使用简化JS触发过渡动画，如下所示：

.sliding-box {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: -100px; // Initial position of sliding-box
    transition: left 1s linear; //Specify the animation behaviour
}
.sliding-box.in {
    left: 0px; // Position of sliding-box after animation
}

slideIn() {
    const moveElemment = document.getElementById('sliding-box');
    if (moveElemment) {
      // When this selector is added, it triggers the animation
      // transition from left:-100px to left:0px over a 1 second 
      // interval
      moveElemment.classList.add('in'); 
    }
  }

---

为什么不使用本机API，即

窗口。滚动
或类似的内容来滚动它？如果只是为了一张简单的幻灯片，请使用CSS转换。