CODEWITHSUNDEEP
reactjsanimationreact-transition-groupweb-animationsreact-animations
German Cocca
German Cocca

Reputation: 839

How does react-transition-group CSSTransition work?

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!

Upvotes: 2

Views: 2633

Answers (3)

LMS5400
LMS5400

Reputation: 492

I'm convinced this package no longer works. In attempting to migrate from v1 to v2, nothing works at all. I even started over with the exact sample from their docs. The classes do not get applied to the children's wrapper. I'm using a nodeRef and in props exactly how they they are shown in the docs.

100% broken package.

Upvotes: 0

Audrey_Dev
Audrey_Dev

Reputation: 27

It looks like this was posted a while ago, and that you have since switched to React-spring in your code. However, if you are still interested, or if anyone else might still be interested,I found a couple of good tutorial videos that might help you use React-transition-group in the future.

These youtube videos are pretty detailed.

Also, here are the docs for React-transition-group: ReactCommunity React-transition-group

Upvotes: 0

Ian Canino
Ian Canino

Reputation: 21

I was also having some trouble with this library. I am curious if you have tried adding the appear attribute to <CSSTransition>? According to Transition.js:

By default the child component does not perform the enter transition when it first mounts, regardless of the value of in. If you want this behavior, set both appear and in to true.

Remember to also define in your css.*-appear-enter, .*-appear-enter-active properties as well. Typically, they are the same as .*-enter, .*-enter-active.

Upvotes: 1

Related Questions