javascript - 如何使用内联样式标签使元素位置平滑变化？

Question

我有一个具有内联样式标签的组件，我在其下方传入数组，一次传入一个项目。这是将光标从一个地方移动到另一个地方。

let myStyle =  [{
       left: "0",
       bottom: "-20px",
    },
    {
       left:"10px",
       bottom: "-30px",
    },
    {
       left: "20px",
       bottom: "-40px"
   }]



<div className="my-component" style={myStyle[i]}></div>

我使用 slider 在数组中移动，但 slider 并不总是只增加一个。即使轻轻拖动也会使其跳跃两三个点，这会搞砸运动。

目前我认为 onChange，如果我滑动得太快，我只会得到开始和结束值，而不会得到中间值。我需要的是让我的函数在 slider 的每一步上运行，以便它一步一步地移动。内置的 step 功能在这里似乎不是一个足够的解决方案。

<div class="slidecontainer">
  <input type="range" min="1" max="100" value="50" class="slider" id="myRange">
</div>

我尝试了类似这样的操作，希望它能出现 n 次并在每次 true 时运行，即使值要增加数倍。没用

  handleChange(event) {
    if(currentStateValue - previousStateValue === 1){
    this.setState({
        value: event.target.value,
        });
        this.renderStuff() //run my function here
    }
   } 

for 循环的想法:如果 slider 增加 3，那么我将循环 3。但它运行 block 的速度如此之快，光标立即出现在结束位置。

       //OR
      let diff = currentState-previousState
      for (var i = 0; i < diff; i++) {
      this.renderStuff() //run my function here
     }

我有一个 fiddle (这比我的实际项目效果更好)，但想法是一样的。我对全新的方法持开放态度。

Answer 1

您可以通过适当的 css 属性确保更平滑的过渡:

.my-component {
    transition: all 386ms;
}