触发状态变化的特定功能

Question

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

1. 如何停止 useSpring 以仅在 click = true 时执行（也在加载时）？ 对此的后续问题是。真的是暂时的，我怎么能这样 动画完成后或 x 毫秒后恢复为 false。
2. 如何在 Input 中的 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>
  );
}

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