Question

我正在尝试通过按钮更新动画速度。按下按钮后，没有任何变化，但是当切换选项卡时，它将更新为设置的速度。

function Homepg() {

  const [speed, setSpeed] = useState(15);

  function faster () {
    setSpeed(speed === 1 ? speed : speed-2)
  };

  function slower() {
    setSpeed(speed+2);
  }

  const animationStyle = {
    animation: `App-logo-spin infinite ${speed}s linear`
  }

  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} style={animationStyle} className="App-logo-circle" alt="White cross, with a blue bacground spining" id='spinnerLogo'/>
        <p>Hello, and welcome to the begining of the Swiss Plus Website. <strong>We hope you enjoy your stay</strong></p>
        <button className='App-button' id='fastLogoButton' onClick={faster}>Increase Spin Speed!</button>
        <button className='App-button' id='slowLogoButton' onClick={slower}>Decrease Spin Speed!</button>
      </header>
    </div>
  );
}

Answer 1

我刚刚测试了您的代码，速度本身确实发生了变化（如果您检查HTML节点本身，您将看到正确的时间）。

我认为它不起作用的原因是因为您的CSS动画设置为infinite，所以从理论上讲，该动画仍在运行（按Tab键可能会刷新动画，因为当标签被隐藏）。

当速度改变时，您可以通过设置新的key（强制重新创建img节点）来重新创建DOM节点本身：

<img key={speed} src={logo} style={animationStyle} className="App-logo-circle" id='spinnerLogo'/>

但是那样会重置看起来像锯齿的动画，而不是最佳的动画。

我建议使用react-spring，它可以让您微调动画。

使用useState反应不重新渲染样式更改

1 个答案: