Как анимировать текст, когда он обновляется с использованием Reaction-Spring?

Question

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

как это возможно с помощью реагирующей пружины?

Answer 1

Вы можете поместить это в переход, и он будет обрабатывать это для вас:

const transitions = useTransition(text, null, {
  from: { opacity: 0 },
  enter: { opacity: 1 },
  leave: { opacity: 0 }
})
return transitions.map(({ item, key, props }) => (
  <animated.div style={props}>{item}</animated.div>
))

Убедитесь, что div расположен абсолютно, если вы хотите, чтобы текстовые фразы накладывались друг на друга.