How does react-transition-group CSSTransition work?

Question

So I'm trying to use react-transition-group to animate the transition between the different sections of an app.

I have the component I want to animate in the CSSTransition component in the following way:

       return (
        <CSSTransition in={showDepSearchResults} timeout={3000} classNames="fade" onEntered={() => showDepSearchResults(true)} onExit={() => showDepSearchResults(false)} >
            <div className='searchResult' key='searchResult'>


                <FlightSearchParameters flightSearchParams={flightSearchParams} typeOfDepartureDate={typeOfDepartureDate} typeOfReturnDate={typeOfReturnDate} typeOfTripSwitch={typeOfTripSwitch} formatPlaces={formatPlaces}/>

                <h1>Vuelos {typeOfSearchTittle()} disponibles:</h1>
                {showFlights()}
                <button className='btn btn-secondary' onClick={(e) => handleSearchAgain(e)}>Buscar más vuelos</button>

            </div>
        </CSSTransition>
    )
}

Also, I have the following code in my CSS:

.fade-appear {
    opacity: 0;
}

.fade-appear-active {
    opacity: 1;
    transition: opacity 3000ms;
}

.fade-enter {
    opacity: 0;
}

.fade-enter-active {
    opacity: 1;
    transition: opacity 3000ms;
}

.fade-exit {
    opacity: 1;
}

.fade-exit-active {
    opacity: 0;
    transition: opacity 3000ms;
}

For some reason I can't yet understand this is not working. Does anyone have an answer for this?

The whole code is available here: https://github.com/coccagerman/bond

Thanks in advance!

How does react-transition-group CSSTransition work?

0 Answers0