0

in a react.js App, i have some simple text stored in the App state , and passed to a child component who will display it directly . i want to animate the transition so that when it changes , the previous text will fade out and then the incoming text will fade in .

how is that possible using react-spring ?

soufiane yakoubi
  • 861
  • 11
  • 31
  • You may try this one: https://stackoverflow.com/questions/43702454/reactjs-fade-in-div-and-fade-out-div-based-on-state – Dhanapal Feb 16 '19 at 10:56

1 Answers1

2

You can put it into a transition and it will handle it for you:

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>
))

Make sure the div is positioned absolutely if you want text phrases to overlap one another.

hpalu
  • 1,357
  • 7
  • 12