Как исправить ошибку загрузки двух компонентов одновременно? - PullRequest
Новая
       16

Как исправить ошибку загрузки двух компонентов одновременно?

0 голосов
/ 25 июня 2019

Я использовал response-router-dom и response-spring useTransitions, анимированные для переходов страниц, но анимация перехода работает хорошо, но есть некоторые ошибки.Я думаю, что могу решить это с помощью CSS, но я не знаю, что делать.Если вы знаете, как ее решить, я был бы очень признателен, если бы вы мне помогли.

Я пробовал переходы страниц с помощью response-router-dom, response-spring, useTransitions, animated, __RouterContext

Нет сообщений об ошибках.это некоторые ошибки

Он поднимается снизу вверх.Я просто хочу быть в центре и дать эффект непрозрачности при перемещении страницы. 

function App() {
  const { location } = useContext(__RouterContext);
  const transitions = useTransition(location, location => location.pathname, {
    from: { opacity: 0 },
    enter: { opacity: 1 },
    leave: { opacity: 0 }
  });
  return (
    <React.Fragment>
      <Navbar />
      {transitions.map(({ item, props, key }) => (
        <animated.div key={key} style={props}>
          <Switch location={item}>
            <Route exact path="/" component={Home} />
            <Route exact path="/profile" component={Profile} />
            <Route exact path="/about" component={About} />
            <Route exact path="/project" component={Project} />
            <Route exact path="/contact" component={Contact} />
          </Switch>
        </animated.div>
      ))}
    </React.Fragment>
  );
}

export default App;
введите описание изображения здесь

1 Ответ

0 голосов
/ 25 июня 2019

Трудно это исправить без рабочего примера. Но если я правильно понимаю, ваша проблема в том, что новая страница появляется под старой страницей. И он подпрыгивает, когда старая страница исчезает. Так работает переход. Когда вы хотите, чтобы переходы между входом и выходом перекрывали друг друга, вы должны исправить это с помощью CSS, как вы уже упоминали. Примерно так: 

const transitions = useTransition(location, location => location.pathname, {
  from: { opacity: 0, position: 'absolute' },
  enter: { opacity: 1 },
  leave: { opacity: 0 }
});

Это аналогичный пример: https://codesandbox.io/s/page-transition-with-react-router-and-react-spring-b07jp

...