Запуск спецификации c при изменении состояния

Question

Я пытаюсь вызвать отказов кнопку при нажатии кнопки, и я пытаюсь преодолеть несколько вещей, упомянутых ниже:

1. Как мне прекратить использование Spring для выполнения только при нажатии = правда (тоже на нагрузке)? Дополнительный вопрос для этого. true является временным, как я могу сделать так, чтобы он возвращался к ложному после завершения анимации или после x мс.
2. Как мне остановить его выполнение анимации каждый раз, когда useState () изменяется в Input?
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

Я играл вокруг твоего кода. Я нашел способ сделать это. Прежде всего, вы должны добавить условие для использования Spring, чтобы проигрывать анимацию только в том случае, если щелчок истинен. Во-вторых, вы должны вернуть клик обратно в 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