изменить состояние по завершении анимации реагирующей пружины,

Question

В настоящее время у меня есть сценарий использования, при котором анимация запускается при изменении состояния, которое инициируется действием щелчка. Все работает нормально, когда я делаю щелчок в первый раз, если я постоянно нажимаю на одну и ту же ссылку, анимация не срабатывает, что, по моему мнению, происходит из-за того, что состояние не меняется.

код песочницы

В приведенной выше песочнице кода нажатие на "прибрежная доставка" запускает анимацию в первый раз, но последующий непрерывный щелчок не запускает анимацию.

Answer 1

Попробуйте использовать функцию onRest для сброса состояния:

const props = useSpring({
    to: [{ opacity: 1, color: '#ffaaee' }, { opacity: 0, color: 'rgb(14,26,19)' }],
    from: { opacity: 0, color: 'red' }, 
    onRest : () => set(null) 
  })