Как переходить страницы в Гэтсби - PullRequest
Новая
       34

Как переходить страницы в Гэтсби

1 голос
/ 06 января 2020

Я пытаюсь использовать React Spring для перехода страниц в Gatsby, аналогично этой реализации с React Pose - http://joshdcuneo.com/gatsby-animate-page-transitions/

Вот песочница для кода моей попытки реализации - https://codesandbox.io/s/great-sky-3g2lo?fontsize=14&hidenavigation=1&theme=dark

Он использует API wrapPageElement Гэтсби для добавления перехода в gatsby-browser.js

import React from 'react'
import { animated, useTransition } from 'react-spring'

const SimpleSpring = ({ children, props }) => {
  const transitions = useTransition(props.path, null, {
    from: { opacity: 0 },
    enter: { opacity: 1 },
    leave: { opacity: 0 },
    config: { duration: 3000 }
  })

  return (
    <div style={{ display: 'flex', justifyContent: 'center' }}>
      {transitions.map(({ item, key, props }) => (
        <animated.div key={key} style={props}>
          {children}
        </animated.div>
      ))}
    </div>
  )
}

export const wrapPageElement = ({ element, props }) => {
  return <SimpleSpring props={props}>{element}</SimpleSpring>
}

В настоящее время, когда инициируется переход страницы, React Spring анимирует исходную страницу и целевую страницу в , как видно из этого развернутого примера (нажмите «Go to page 2») . То есть в течение переходного периода в DOM есть две страницы, которые постепенно исчезают, как указано в ловушке. Однако исходная страница мгновенно обновляется, чтобы иметь структуру DOM целевой страницы, когда начинается переход. Итак, есть две идентичные страницы, одна исчезает, другая исчезает.

Чего мне не хватает? Я пробовал все виды вещей с useRef и React.cloneElement, но не могу заставить страницу-источник оставаться такой, какой она должна быть до завершения перехода.

Примечания

  • Я использовал большую продолжительность анимации, а не пружину, чтобы лучше видеть, что происходит

  • То же самое с макетом. Как только DOM отображает, как и должно быть, эти страницы будут position: absolute во время перехода, поэтому они перекрываются. У меня сейчас есть их бок о бок для отладки

  • Репо на Github - https://github.com/JakeElder/gatsby-react-spring-page-transition

  • Развернутое приложение - https://gatsby-spring-page-transition.now.sh
...