由于其他代码在间隔之间运行，setInterval函数的间隔不均匀

Question

我正试图让一个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}%`);
}
}
}
}

Answer 1

Perphas您可以利用CSS转换来实现与JS线程解耦的更平滑的动画，以解决您的问题吗？例如，您可以使用transition规则和附加选择器更新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
}

使用简化的JS来触发转换动画，如下所示：

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