代码之家 › 专栏 › 技术社区 › Martin Nordström

触发组件之间的转换

transition reactjs javascript

Martin Nordström · 技术社区 · 6 年前

幕后故事

我正试图用React来达到与此类似的效果: https://youtu.be/OnlF8sKQRsY

我找到了一个叫做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 从我的状态中,哪个值可以从中的按钮更改 开始屏幕 .

在 快速结账 我已经成功地创建了一个过渡,在那里我的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>
);

但当涉及到触发从 开始屏幕 我不知道怎么做。我甚至不知道我现在走的路是否正确。任何帮助都是非常感谢的。

谢谢你