Я пытаюсь реализовать переход gsap между компонентами с помощью react-router-dom
.
App.js
function App() {
return (
<Router>
<NavLink exact strict to='/'>Home</NavLink>
<NavLink exact strict to='/services'>Services</NavLink>
<AppRoutes />
</Router>
);
}
AppRoutes
const routes = [
{path: '/', name: 'Home', Component: Home},
{path: '/services', name: 'Services', Component: Services}
];
const AppRoutes = props => {
return (
<>
{routes.map(({path, Component}) => (
<Route key={path} exact path={path}>
{({match}) => (<Transition
timeout={1000}
in={match !== null}
mountOnEnter
unmountOnExit>
{(state) => {
return (
<Component state={state} match={match} />
);
}}
</Transition>)}
</Route>
))}
</>
);
};
В компоненте home
есть useEffect
useEffect(() => {
console.log('home effects', props.state, props.isExiting);
if (props.state === 'entered' && props.match !== null) {
timeline.add(
TweenMax.staggerFromTo('h1', 0.5, {y: '100%', opacity: 0}, {
y: '0%',
visibility: 'visible',
opacity: 1,
ease: Power3.easeOut,
}, 0.3)
);
timeline.play();
}
if (props.state === 'exiting') {
console.log('home reversing');
timeline.reverse();
}
return () => {
// timeline.kill();
};
});
Проблемы:
- При нажатии
<NavLink exact strict to='/services'>Services</NavLink>
страница останавливается на время timeout
, строка timeline.reverse()
выполняется, но безэффективная анимация и она переходит на маршрут /services
- При нажатии
<NavLink exact strict to='/'>Home</NavLink>
она не останавливается на время ожидания, а просто переходит на маршрут /
Кроме того, я не понимаю из документации, как in
опора работает в Transition
компоненте.
Есть идеи?