react-transition-group#CSSTransitionGroup JavaScript Examples

render() {
        let component = this.state.expanded ? (
            <div className='sidebar expanded' key='sidebar-expanded'>
                <div>
                    <a href='#' className='btn pull-right' onClick={ this.onBurgerClick }>
                        <span className='glyphicon glyphicon-remove' />
                    </a>
                    { this.props.children }
                </div>
            </div>) :
            (<div className='sidebar collapsed' key='sidebar'>
                <div>
                    <a href='#' className='btn' onClick={ this.onBurgerClick }>
                        <span className='glyphicon glyphicon-menu-hamburger' />
                    </a>
                </div>
            </div>);

        return (<CSSTransitionGroup transitionName='sidebar' transitionEnterTimeout={ 500 } transitionLeaveTimeout={ 500 }>
            { component }
        </CSSTransitionGroup>);
    }

render() {
        const {side, environment, game_meta} = this.props;
        let hand_array = []
        if (environment) {
            hand_array = side == SIDE.MINE ? environment[side][ENVIRONMENT.HAND].map((cardEnv, cardIndex) => {
                const hasOptions = cardIndex == this.state.cardClicked ? "show_hand_option" : "no_hand_option"
                const info_in = {
                    cardEnv: cardEnv
                }
                const get_hand_card_view = () => {
                    if (is_monster(cardEnv.card.card_type)) {
                        const can_normal_summon = cardEnv.card.can_normal_summon(cardEnv.card, environment) ? "show_summon" : "no_hand_option"
                        const can_set = cardEnv.card.can_normal_summon(cardEnv.card, environment) ? "show_summon" : "no_hand_option"
                        const can_special_summon = cardEnv.card.can_special_summon(cardEnv.card, environment)? "show_summon" : "no_hand_option"
                        const info = {
                            side: side,
                            card: cardEnv,
                            src_location: ENVIRONMENT.HAND
                        }
                        return (
                                <div>
                                    <div className={hasOptions}>
                                        <div className={can_normal_summon} onClick={this.summonOnclick(info, NORMAL_SUMMON)}>Summon</div>
                                        <div className={can_special_summon}>Special</div>
                                        <div className={can_set} onClick={this.summonOnclick(info, SET_SUMMON)}>Set</div>
                                    </div>
                                    <CardView card={cardEnv} />
                                </div>
                        )
                    } else if (is_spell(cardEnv.card.card_type)) {
                        //TODO: can activate the spell or not
                        const can_activate = Core.Effect.can_activate(cardEnv.card, environment) ? "show_summon" : "no_hand_option"
                        const can_set = game_meta.current_phase == PHASE.MAIN_PHASE_1 ? "show_summon" : "no_hand_option"
                        return (
                            <div>
                                <div className={hasOptions}>
                                    <div className={can_activate} onClick={this.activateOnClick(cardEnv)}>Activate</div>
                                    <div className={can_set}>Set</div>
                                </div>
                                <CardView card={cardEnv} />
                            </div>
                        )
                    } else {
                        //traps
                        return <p>fuck</p>
                    }
    
                }

                return (
                    <div className = "hand_card" key = {"hand_card_" + get_unique_id_from_ennvironment(cardEnv)} 
                        onClick={() => this.cardOnClickHandler(cardIndex)} 
                        onMouseLeave={() => this.cardMouseMoveHandler()} 
                        onMouseEnter={()=>this.onMouseEnterHandler(info_in)}>
                            {get_hand_card_view()}
                    </div>
                )


            }) : environment[side][ENVIRONMENT.HAND].map(() => {
                return (
                    // back side for the opponent's
                    <img style={{width: '5%', marginRight: '10px'}} src={'https://ms.yugipedia.com//f/fd/Back-Anime-ZX-2.png'}/>
                )
            })
        }
        return(
                
            <CSSTransitionGroup
                transitionName="example"
                transitionEnterTimeout={500}
                transitionLeaveTimeout={300}
                className={side == SIDE.MINE ? "hand_container_mine" : "hand_container_opponent"}>
                {hand_array}
            </CSSTransitionGroup>
        
        )
    }

render() {
        let gameBoardVisible = this.props.currentGame && this.props.currentGame.started;

        let component = this.router.resolvePath({
            pathname: this.props.path,
            user: this.props.user,
            currentGame: this.props.currentGame
        });

        if(this.state.incompatibleBrowser) {
            component = <AlertPanel type='error' message='Your browser does not provide the required functionality for this site to work.  Please upgrade your browser.  The site works best with a recet version of Chrome, Safari or Firefox' />;
        } else if(this.state.cannotLoad) {
            component = <AlertPanel type='error' message='This site requires the ability to store cookies and local site data to function.  Please enable these features to use the site.' />;
        }

        let backgroundClass = 'bg';
        if(gameBoardVisible && this.props.user) {
            switch(this.props.user.settings.background) {
                case 'BG1':
                    backgroundClass = 'bg-board';
                    break;
                case 'BG2':
                    backgroundClass = 'bg-board2';
                    break;
                default:
                    backgroundClass = '';
                    break;
            }
        }

        return (<div className={ backgroundClass }>
            <NavBar title='Doomtown Online' />
            <div className='wrapper'>
                <div className='container content'>
                    <ErrorBoundary navigate={ this.props.navigate } errorPath={ this.props.path } message={ 'We\'re sorry - something\'s gone wrong.' }>
                        <CSSTransitionGroup transitionName='pages' transitionEnterTimeout={ 600 } transitionLeaveTimeout={ 600 }>
                            { component }
                        </CSSTransitionGroup>
                    </ErrorBoundary>
                </div>
            </div>
        </div>);
    }