Question

我有一个带有内联样式标签的组件，我将其下面的数组一次传递一次。这是将光标从一个位置移动到另一位置。

WithWildCards<T>

我使用滑块在数组中移动，但是滑块并不总是仅增加一个。轻轻地拖动可以使它跳两三点，这会弄乱机芯。

目前，我认为let myStyle = [{ left: "0", bottom: "-20px", }, { left:"10px", bottom: "-30px", }, { left: "20px", bottom: "-40px" }] <div className="my-component" style={myStyle[i]}></div>如果滑动得太快，只会得到开始和结束值，而中间没有。我需要让我的功能在滑块的每个步骤上运行，以便它一步一步地移动。内置的onChange功能似乎不足以解决此问题。

step

我尝试了类似的方法，希望它是真正的n倍，并在每个<div class="slidecontainer"> <input type="range" min="1" max="100" value="50" class="slider" id="myRange"> </div>上运行，即使该值要增加多次。不起作用

true

一个for循环的想法：如果滑块增加3，则循环3个。但是它运行块的速度如此之快，光标会立即显示在结束位置。

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

我有一个fiddle（比我的实际项目效果更好），但想法相同。我愿意接受全新的方法。

Answer 1

您可以使用适当的css属性来确保平滑过渡：

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

Answer 2

如果我正确地理解了您的问题，那么无论滑动输入上检测到多少变化，您都希望动作保持稳定并重复执行。

无需过多修改当前代码，一个解决方案可能是使用modulo operator根据任意滑块值来计算适当的objStyle，如下所示：

// updated code in moveBox() class method    
if(diff === 1){

    const styleObjIndex = this.state.currentIndex % this.state.positions.length;

    this.setState({ styleObj:this.state.positions[styleObjIndex] })
}

Here is an updated jsFiddle-希望能有所帮助！

如何使用内嵌样式标签使元素位置更改平滑？

2 个答案: