0

I use react-transition-group in my project. The whole project works well so far,but there is something confused me. The animation of the project dosen't work without TransitionGroup.

ReactDOM.render(
  <TransitionGroup>
    <CSSTransition
      appear={true}
      classNames="appAppear"
      timeout={500}
    >
      <App/>
    </CSSTransition>
  </TransitionGroup>,
  document.getElementById('root')
);

The document said 'The component manages a set of components in a list.' I still don't know why this hanppen. Can someone tell me ???

TMD
  • 315
  • 3
  • 14

1 Answers1

0

TransitionGroup manages timed mounting and un-mounting of components, which allows animations to start/end before mounting/un-mounting them. Whereas CSSTransition manages classnames based on current mount state like appear, enter, done, etc).

If you want to know how each of these components work, take a look at their source code:

https://github.com/reactjs/react-transition-group/blob/master/src/TransitionGroup.js

https://github.com/reactjs/react-transition-group/blob/master/src/CSSTransition.js

Arber Sylejmani
  • 2,078
  • 1
  • 16
  • 20
  • Thank, finally, I found the answer. TransitionGroup put a 'in' to CSSTransition automatically, so that the component in CSSTransition can animate during mounting or unmounting. – TMD Feb 11 '18 at 10:41