maisano / react-router-transition

painless transitions built for react-router, powered by react-motion
http://maisano.github.io/react-router-transition/
MIT License
2.6k stars 138 forks source link

Transition is only ok on first router change. #66

Closed coolguy001tv closed 2 years ago

coolguy001tv commented 7 years ago

I am using the demo listed on readme. But the effect only works on the first time. After that , there's no effect. It seems that the opacity is not set properly when leave. Here's the main code:

import React from 'react';
import ReactDOM from 'react-dom';
import { HashRouter, Route,Switch } from 'react-router-dom';
import { AnimatedSwitch } from 'react-router-transition/lib/react-router-transition';
import {Provider} from 'react-redux';
import configureStore from './configureStore';

//reducers
import Reducer from './reducers';
import InitReducer from './initReducer';

//routers
import Login from './routers/Login';
import Logs from './routers/Logs';
import Config from './routers/Config';

//styles
import './index.scss';

//store
let store = configureStore(Reducer, InitReducer);

class TheApp extends React.Component {
    render() {
        return (
            <HashRouter>
                <AnimatedSwitch
                    atEnter={{ opacity: 0 }}
                    atLeave={{ opacity: 0 }}
                    atActive={{ opacity: 1 }}
                    className="switch-wrapper"
                >
                    <Route path="/"  exact component={Config}/>
                    <Route path="/login" component={Login}/>
                    <Route path="/logs" component={Logs}/>
                    <Route path="/config" component={Config}/>
                </AnimatedSwitch>
            </HashRouter>
        )
    }
}

ReactDOM.render(
    <Provider store={store}>
        <TheApp/>
    </Provider>,
    document.getElementById('root')
);

I am using react-router-dom 4.2.2, react 15.6, react-router-transition 1.0.1.

a-nozeret commented 7 years ago

You probably have an error in between. For example fixing this https://github.com/maisano/react-router-transition/issues/58#issuecomment-330588409 helped me get it working every time