Question

我正在尝试使用react-router-dom在组件之间实现 gsap 过渡。

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路线< / li>
单击<NavLink exact strict to='/'>Home</NavLink>时，它不会在超时时间内冻结，而只是跳至/路由

此外，我从文档中无法了解in组件在Transition组件中如何工作。

有什么主意吗？

反应路由器和反应组过渡出口不起作用

0 个答案: