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

我试图在点击按钮时触发按钮反弹，并试图克服以下几点：

如何停止useSpring，使其仅在click=true（也在加载时）时执行？ 这方面的后续问题是。真是暂时的我怎么能做到呢 动画完成后或x ms后，它将恢复为false

如何阻止它每次在输入中更改useState（）时执行动画

如何改进动画反弹，使其看起来更平滑？（可选）

导出默认函数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）”}，
配置：{
质量:1,，
张力：1000，
摩擦系数：13
}
});
常量getInput=e=>{
设置输入（如目标值）；
};
返回(
setClick（true）}>
点击我
);
}

我玩弄了你的代码。我找到了一个办法。首先，您应该为useSpring添加一个条件，以便仅在单击为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>
  );
}

导出默认函数App（）{
const[click，setClick]=useState（false）；
const[input，setInput]=useState（“”）；
const clicked=useSpring({
收件人：单击
？[{变换：“尺度（0.95）”}，{变换：“尺度（1）”}]
：[{变换：“比例（1）”}]，
from:{transform:“scale（1）”}，
配置：{
质量:1,，
张力：1000，
摩擦系数：13
}
});
常量getInput=e=>{
设置输入（如目标值）；
};
常量handleClick=（）=>{
setClick（true）；
setTimeout（（）=>setClick（false），700）；
};
返回(
啊，谢谢！我在做点击？{transform…}:{transform}时没有使用数组。你知道更好的方法使动画看起来更平滑吗？对我来说似乎足够平滑。我看不出有任何问题。
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>
  );
}