1

I have a component that can render different components. I'd like to have an animated transition when the rendered components change.

Example:

class Container extends React.Component {
  state = {
    showing: 'primary'
  }
  render () {
    const { showing } = this.state

    const whichComponent = (showing === 'primary') ? <Primary /> : <Secondary />

    return (
      <div>
        {whichComponent}
      </div>
    )
  }
}

When the state changes and the "Secondary" component is rendered, I'd like to introduce a transition that essentially does SlideOut and SlideIn (but I'll take anything at this point).

I've tried react-transition-group to no avail and I just can't seem to find anything that works. Any tips or pointers in the right direction, would be greatly appreciated.

dzm
  • 22,844
  • 47
  • 146
  • 226
  • If you have a condition which renders either Primary or Secondary, an animation would not be possible, because at one point the secondary component is there and suddenly it isn't. You should be using className with "active" to check whether you should show or hide the element. And use css transitions to animate a div from "" to "active". – Bhargav Ponnapalli Aug 11 '17 at 15:17
  • Hm, I'm pretty sure this is not the case. – dzm Aug 11 '17 at 15:37
  • Have you tried adding the fadeout to the `componentWillUnmount` event? – jmargolisvt Aug 11 '17 at 15:58
  • @jmargolisvt You mean appending classes there? There has to be a way to do this elegantly, with react transition group, or otherwise (maybe react motion), not sure... – dzm Aug 11 '17 at 16:19
  • That's what I was thinking, but it appears this person already found that unsatisfactory: https://stackoverflow.com/questions/29977799/how-should-i-handle-a-leave-animation-in-componentwillunmount-in-react – jmargolisvt Aug 11 '17 at 16:27
  • You may be using the old version of `react-transition-group`. See the "v1 stable" branch here: https://github.com/reactjs/react-transition-group/tree/v1-stable – Pop-A-Stash Aug 11 '17 at 16:27
  • @JoelCDoyle thanks, yeah I saw the stable one here. Lot of mixed examples, may just need to play around more here, perhaps it's just not as simple to do as it would seem. – dzm Aug 11 '17 at 16:48

0 Answers0