Предыстория
Я пытаюсь добиться такого же эффекта, как этот, с React: https://youtu.be/OnlF8sKQRsY. Поскольку я никогда не делал переходов и анимаций, я провел некоторое исследование о переходах и анимациях с React и нашел много способов делать это.
Я нашел библиотеку под названием Pose, https://popmotion.io/pose/,, которая выглядит действительно хорошо и предлагает множество способов создания переходов. Я использую это прямо сейчас, но я могу измениться, если кто-нибудь даст мне подсказку.
Что мне интересно
Как я могу запустить свой переход, когда я нахожусь на компоненте, который я хочу "отойти"? Я получил это прямо сейчас:
return (
<React.Fragment>
{!this.state.renderStartScreen && (
<ExpressCheckout whereToEat={whereToEat} />
)}
{this.state.renderStartScreen && (
<StartScreen
hide={!renderStartScreen}
startExpressCheckout={this.startExpressCheckout}
/>
)}
</React.Fragment>
);
StartScreen - это компонент, на котором я сейчас нахожусь, а ExpressCheckout - это компонент, на который я хочу перейти. renderStartScreen исходит из моего состояния, значение которого можно изменить с помощью кнопки в StartScreen.
В ExpressCheckout мне удалось создать переход, в котором мой пользовательский интерфейс перемещается слева направо с помощью Pose.
const Box = posed.div({
left: { x: 1000 },
right: {
x: -500,
transition: {
duration: 1500
}
}
});
return (
<Grid
style={{ height: "100vh", backgroundColor: "#FFF", marginTop: "2em" }}
>
<Box className="box" pose={this.state.animate ? "right" : "left"}>
<h1 style={{ textAlign: "center" }}>EXPRESS</h1>
</Box>
</Grid>
);
Но когда дело доходит до запуска перехода для перехода от StartScreen Я понятия не имею, как это сделать. И я даже не уверен, что я сейчас на правильном пути. Любая помощь очень ценится.
Спасибо