Gatsby JS Компоненты маршрута не хотят загружать класс gsap после обновления - PullRequest
Новая
       17

Gatsby JS Компоненты маршрута не хотят загружать класс gsap после обновления

0 голосов
/ 09 января 2020

Я только что попытался реализовать gsap на gatsby js, чтобы сделать плавный переход на страницу. Анимация работает нормально, когда я перехожу с индекса на страницу «о», но после того, как я переопределил sh idky, но браузер не отображает класс gsap. Спасибо за помощь ^^ 

const routes = [
   { path: "/", name: "Home", Component: Home },
   { path: "/about", name: "About", Component: About }
 ];

 function App() {
   const onEnter = node => {
   gsap.from(
    [node.children[0].firstElementChild, node.children[0].lastElementChild],
    0.6,
    {
    y: 30,
    delay: 0.6,
    ease: "power3.InOut",
    opacity: 0,
    stagger: {
      amount: 0.6
    }
  }
 );
};

 const onExit = node => {
   gsap.to(
   [node.children[0].firstElementChild, node.children[0].lastElementChild],
   0.6,
   {
    y: -30,
    ease: "power3.InOut",
    stagger: {
      amount: 0.2
     }
   }
 );
};

return (
  <Router>
    <Header />
    <div className='container'>
      {routes.map(({ path, Component }) => (
        <Route key={path} exact path={path}>
          {({ match }) => (
            <CSSTransition
              in={match != null}
              timeout={1200}
              classNames='page'
              onExit={onExit}
              onEntering={onEnter}
              unmountOnExit>
              <div className='page'>
                <Component />
              </div>
            </CSSTransition>
          )}
        </Route>
      ))}
    </div>
  </Router>
  );
}

Экспорт приложения по умолчанию;

...