Question

我试图让一个div使用纯JS在React项目中将一个简单的幻灯片放到父div中，并且幻灯片的平滑性存在问题。在控制台日志中，我可以看到在setInterval调用之间运行代码（slideIn）时，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

可以说，您可以利用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'); 
    }
  }

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

1 个答案: