javascript - 触发状态变化的特定功能

Question

我正在尝试在单击按钮时触发按钮弹跳，并且我正在尝试克服下面提到的一些事情：

1. 如何停止 useSpring 仅在 click = true 时执行（也在加载时）？对此的后续问题是。true 是暂时的，我怎样才能让它在动画完成后或 x ms 后恢复为 false。
2. 每次输入中的 useState() 更改时，如何阻止它执行动画？
3. 如何提高动画反弹看起来更流畅？（可选的）

export default function App() {
  const [click, setClick] = useState(false);
  const [input, setInput] = useState("");
  const clicked = useSpring({
    to: [{ transform: "scale(0.95)" }, { transform: "scale(1)" }],
    from: { transform: "scale(1)" },
    config: {
      mass: 1,
      tension: 1000,
      friction: 13
    }
  });

  const getInput = e => {
    setInput(e.target.value);
  };
  return (
    <div className="App">
      <Input placeholder="type here" onChange={getInput} />
      <animated.div style={clicked}>
        <Button style={{ width: "300px" }} onClick={() => setClick(true)}>
          Click me
        </Button>
      </animated.div>
    </div>
  );
}

标签： javascriptreactjstriggersreact-hooksreact-spring

Answer 1

我玩过你的代码。我找到了一种方法。首先，您应该为 useSpring 添加一个条件，以仅在 click 为 true 时播放动画。其次，您应该在动画完成后将点击恢复为 false。我将此代码中的还原部分使用了超时。

export default function App() {
  const [click, setClick] = useState(false);
  const [input, setInput] = useState("");
  const clicked = useSpring({
    to: click
      ? [{ transform: "scale(0.95)" }, { transform: "scale(1)" }]
      : [{ transform: "scale(1)" }],
    from: { transform: "scale(1)" },
    config: {
      mass: 1,
      tension: 1000,
      friction: 13
    }
  });

  const getInput = e => {
    setInput(e.target.value);
  };

  const handleClick = () => {
    setClick(true);
    setTimeout(() => setClick(false), 700);
  };

  return (
    <div className="App">
      <Input placeholder="type here" onChange={getInput} />
      <animated.div style={clicked}>
        <Button style={{ width: "300px" }} onClick={handleClick}>
          Click me
        </Button>
      </animated.div>
    </div>
  );
}

https://codesandbox.io/s/focused-joliot-lk68o