Question

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

如何停止useSpring仅在click = true（也处于加载状态）时执行？一个后续的问题是。真的是暂时的，我该怎么做动画制作完成或x ms之后，它会恢复为false。
每次Input中useState（）更改时如何停止执行动画？
如何改善动画弹跳以使其看起来更平滑？（可选）

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

我玩过你的代码。我找到了一种方法。首先，您应该添加条件to useSpring仅在click为true时播放动画。其次，动画制作完成后，您应将click还原为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>
  );
}

blog post

在状态改变时触发特定功能

1 个答案: