reactjs / react-transition-group

An easy way to perform animations when a React component enters or leaves the DOM
https://reactcommunity.org/react-transition-group/
Other
10.15k stars 650 forks source link

Transitions working on Electron and Android? #583

Open fernandodanielmartinez opened 4 years ago

fernandodanielmartinez commented 4 years ago

What is the current behavior?

I am working on an app built on Cordova and Electron (for Android and Windows use). The transitions are working (with a 450 ms timeout) on localhost but when I run the project on Electron and Android, the transitions are not working (like a 0 ms timeout).

What is the expected behavior?

It is possible that this library not work with Electron and Android?

Code:

App.ts:

                <HashRouter>
                        <Route render={({location}) => (
                            <TransitionGroup>
                                <CSSTransition key={location.pathname} timeout={450} classNames="fade">
                                    <Switch location={location}>
                                        <Route exact path="/" component={Basket}/>
                                        <Route path="/manualentry" component={ManualEntry} />
                                        <Route path="/checkout" component={Checkout} />
                                        <Route path="/orderreceipt" component={OrderReceipt} />
                                        <Route path="/paymentscreen" component={PaymentScreen} />  
                                    </Switch>  
                                </CSSTransition>
                            </TransitionGroup>
                        )} />                                            
                </HashRouter>

App.css:

.page {
    position: absolute;
    left: 0;
    right: 0;
    flex: 1;
    height: 100%;
}

.fade-appear,
.fade-enter {
    opacity: 0;
    z-index: 1;
}

.fade-appear-active,
.fade-enter.fade-enter-active {
    opacity: 1;
    transition: opacity 300ms linear 150ms;
}

.fade-exit {
    opacity: 1;
}

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

And in the components, I added a div in the beginning that calls the class "Page".

Thanks

ram-parthiban commented 3 years ago

Hi @fernandodanielmartinez, Were you able to address this issue? I am also facing the same issue in Electron