Движение кадра с реакцией маршрута не работает должным образом с эффектом слайда

Я учусь реагировать в последние несколько дней. Я экспериментировал со слайд-анимацией маршрутов реакции и использовал Framer Motion. Однако я много раз устал и не мог заставить его работать должным образом.

По какой-то причине слайд в анимации не тот, просто следующий маршрут выскочил как мгновенно.

Я хочу добиться эффекта, при котором новая страница скользит, а отключаемая страница выдвигается. Я не мог получить два слайда одновременно.

Я вставил песочницу из этого. https://codesandbox.io/s/react-router-transition-with-framer-motion-s81tc?file=/src/App.js.

Любая помощь будет оценена по достоинству.

Спасибо.


person Kongeek    schedule 13.06.2020    source источник


Ответы (1)


Попробуйте добавить свойство exitBeforeEnter для AnimatePresence:

<AnimatePresence exitBeforeEnter initial={false}>
        ...
</AnimatePresence>

 Изменить переход маршрутизатора React с помощью Framer Motion

person Dennis Vash    schedule 13.06.2020
comment
Спасибо, exitBeforeEnter позволяет входящей странице ждать, пока размонтируемая страница полностью не откажется. Как мы можем добиться эффекта, когда новая страница скользит внутрь, а несмонтированная страница выдвигается, как свайпер? - person Kongeek; 13.06.2020
comment
активировать анимацию одновременно - person Dennis Vash; 13.06.2020
comment
Это означает, что exitBeforeEnter не подходит для этого сенарио? Если я удалю exitBeforeEnter, новая страница снова начнет мигать, а отключаемая страница выдвинется, как и ожидалось. - person Kongeek; 13.06.2020
comment
У вас есть официальный пример: codeandbox .io / s / - person Dennis Vash; 13.06.2020
comment
@DennisVash Не могли бы вы взглянуть на следующий вопрос: stackoverflow.com/questions/66356418/ - person HKS; 24.02.2021