score:0

Accepted answer

i played around your code. i found a way to do it. first of all you should add a condition to usespring to only play the animation if click is true. secondly you should revert click back to false after the animation completed. i used timeout for the reverting part in this code.

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


Related Query

More Query from same tag