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.
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:
I am using react-router-dom 4.2.2, react 15.6, react-router-transition 1.0.1.