0

I have a button that will change a state from true or false depending on the current state. The text on an element will change when this state changes.

I tried using Transition from 'react-transition-group' because I'm using Emotion styled.

const [animate, setAnimate] = useState(false)

const Heading = styled.h1`
 transition: opacity 0.2s;
 opacity = ${({state}) => (state === 'entering' || state === 'entered' ? 1 : 0)};
`
return (
  <Transition in={animate} timeout={300}>
    {state => <Heading state={state}>{animate ? 'Hello' : 'World'}</Heading>}
  </Transition>
  <button onClick={() => setAnimate(!animate)}>Switch</button>
)

Here, I'm trying to have the 'Hello' text fade out while the 'World' text fades in when the state changes from true to false.

DjangoJefe
  • 43
  • 5

1 Answers1

0

I managed to get it to work by using a different state to track the animation status and a timer that will set the state back to true after it expires. Basically, this will reset the animation state back to "entered" after it "exited" so that the next animation can occur.

I'm not totally satisfied with this solution and would like a better one if someone can provide.

DjangoJefe
  • 43
  • 5