Question

背景故事

我正在尝试通过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中，我设法创建了一个过渡，其中UI随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过渡的过渡时，我不知道该怎么做。而且我什至不确定我现在是否走在正确的道路上。任何帮助都非常感谢。

谢谢

Answer 1

在阅读了很多Pose自己的文档之后，我设法解决了我的问题。

这是我在React with Pose中组件之间转换的方式。

希望它对以后的人有帮助！

https://codesandbox.io/s/5x2mpq1ljl

触发组件之间的过渡

背景故事

我想知道的

1 个答案: