У меня есть коммутатор и маршрутизатор, и всякий раз, когда маршрут меняется, он идет слева направо, я хотел бы знать, есть ли простой способ, которым анимация может идти справа налево в зависимости от изменения маршрута. Заранее спасибо.
https://codesandbox.io/s/page-transition-with-react-router-and-react-spring-b07jp
Я нашел этот пример в Интернете, и я хотел бы знать, как он может перемещаться справа налево, когда вы нажимаете профиль.
Решение состоит из двух частей. Вы хотите определить, когда вы хотите изменить направление движения. В этом случае вы хотите отменить его, когда вы находитесь на странице профиля. location.pathname === "/profile-page" Затем вам нужно переключить направление на основе этой информации. Это было описано в другом ответе. Весь пример может быть примерно таким:
const { location } = useContext(__RouterContext);
const reverse = location.pathname === "/profile-page";
const transitions = useTransition(location, (location) => location.pathname, {
from: {
position: "absolute",
width: "100%",
opacity: 0,
transform: reverse ? "translate(-100%,0)" : "translate(100%,0)"
},
enter: { opacity: 1, transform: "translate(0%,0)" },
leave: {
opacity: 0,
transform: reverse ? "translate(50%,0)" : "translate(-50%,0)"
}
});
Позиция управляется transform: 'translate(__)' в строках 46-49 этого кода. Подробнее о CSS-преобразованиях и функция перевода на MDN.
Все, что вам нужно сделать, чтобы изменить направление, это поменять местами знаки двух процентов.
Измените translate(100%,0) на translate(-100%,0) в стиле from.
Измените translate(-50%,0) на translate(50%,0) в стиле leave.
