Monday, May 29, 2017

ReactJS - Animating with ReactCSSTransitionGroup

Here are a few very important reminders for ReactJS CSS3 animations using ReactCSSTransitionGroup:

1. Your ReactCSSTransitionGroup should be mounted (rendered) before the content that should be dynamically changed.
This means that ReactCSSTransitionGroup and it's child element(s) must not appear at the same action. For example, if both ReactCSSTransitionGroup and it's child element get mounted at the time when property prop1 gets changed, your animation won't work.

So, child elements need to be mounted later then their parent ReactCSSTransitionGroup.


2. Any change of the child elements visibility must come with it's own unique key. If the child elements have no unique keys, the animations won't appear at all!



Here is a working example:

START OF RENDER FUNCTION


....
....


  var curScreen= this.props.curScreen;

    let outerContainer=null;

    if(curScreen!=null){
       // alert("It is not null. I'm mounting it...");


        outerContainer=(
            <div className={'rc-container-outer ' + curScreen}  key={curScreen+"-screen-step"}>


                <div className='panel panel-default'>
                    <div className='panel-body'>

                        <ProgressBar />




                        <StepContainer curScreen={this.props.curScreen} />







                    </div>
                </div>

            </div>

        );



    }
    else{

        outerContainer=<p  key="22aaaa1">Loading..</p>;
       // alert("It is null....");
    }



....
....
....


                        <ReactCSSTransitionGroup
                            transitionName="rct"



                        >

                                {outerContainer}




                        </ReactCSSTransitionGroup>



....
....

END OF RENDER FUNCTION

No comments:

Post a Comment

Ubuntu 12.04, 14.04, 16.04 - auto start an app or script before login

To run a command or application at startup, even before the user has logged in, you can use this file: /etc/rc.local The commands entered...