javascript - 触发组件之间的过渡

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 来 self 的状态，可以通过 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