Как анимировать текст, когда он обновляется с использованием 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 расположен абсолютно, если вы хотите, чтобы текстовые фразы перекрывали друг друга.