как анимировать текст при его обновлении с помощью react-spring?

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

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


reactjs text animation transition react-spring
person soufiane yakoubi    schedule 16.02.2019    source источник
comment
Вы можете попробовать это: в div и затемнить div в зависимости от состояния"> stackoverflow.com/questions/43702454/   -  person Dhanapal    schedule 16.02.2019

Ответы (1)


arrow_upward
2
arrow_downward

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

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

person hpalu    schedule 16.02.2019