React-redux-universal-hot-example: Page animations

[hrjason]

I've been checking closed issues if they'd lead me in the right direction, however looking at a few I've still been hitting some hurdles. In my containers/App/App.js I've wrapped my this.props.children within my ReactCSSTransitionGroup, however I haven't been able to get it to work. Styles related to animation have been wrapped within the :global{} in App.scss. Any ideas of what I may be doing wrong here? Thanks guys!

            <ReactCSSTransitionGroup
              transitionName="moveLeft"
              transitionEnterTimeout={500}
              transitionLeaveTimeout={500}
              >
              {this.props.children}
            </ReactCSSTransitionGroup>

[randavidovitz]

Most probably your styling is not align, check that both the actual rendered style and component class style name are aligned

[hrjason]

Turned out I needed to add a component="div" for whatever reason within the grouping. Not exactly sure why to be honest but I'm not complaining haha.

[AnuragSinghTomarr]

hi jasonjchang, can u give me a small demo code for transition. It would be helpful i m unable to achive it.
<div className="_container"> <ReactCSSTransitionGroup transitionName="example" component="div" transitionEnterTimeout={500} transitionLeaveTimeout={500}> {this.props.children} </ReactCSSTransitionGroup> </div>
this is like i used in mine app.js file. But it not working

[hrjason]

@AnuragSinghTomarr sure. so within app.js seems like you'll have to stipulate a key as well.

        <ReactCSSTransitionGroup
          component="div"
          transitionName="moveLeft"
          transitionEnterTimeout={500}
          transitionLeaveTimeout={500}
          >
          {React.cloneElement(this.props.children, {
            key: this.props.location.pathname
          })}
        </ReactCSSTransitionGroup>

Also make sure that your CSS3 page animations are within your global scope if you are using css-modules

[hrjason]

Keep in mind that my transition name is moveLeft please change it to your respective css animation class.

[hrjason]

Also due to the boiler plate linter, you may also need to add this in your propTypes

    location: PropTypes.shape({
      pathname: PropTypes.string
    })

[AnuragSinghTomarr]

As i tried yours and it worked i am thankful to you. Want to know that
{React.cloneElement(this.props.children, { key: this.props.location.pathname })}
why we need to clone element. If instead of this use {this.props.children} than the animation does not works.

[hrjason]

It doesn't have to do so much with React.cloneElement() as it does providing the key attribute. There are other ways of implementing without React.cloneElement() but I just decided to stick with the example pattern provided by react-router.

For more reference:
https://facebook.github.io/react/docs/animation.html

Skip down to the red Note:

[AnuragSinghTomarr]

I wanted to use the low level API for transition in react i.e. ReactTransitionGroup

render() { const {user} = this.props; const styles = require('./App.scss'); return ( <ReactTransitionGroup transitionName="example"> <div className={styles.appContent}> {this.props.children} </div> </ReactTransitionGroup> ); }

this is the code in app.js, but i am getting error as Warning: React.createElement: type should not be null, undefined, boolean, or number. It should be a string (for DOM elements) or a ReactClass.

Can you help me out what wrong i am doing

[dawidvdh]

Has anyone figured out how to use ReactTransitionGroup in this project? Would also really like to use the low level API.

Any Help Greatly Appreciated.