触发组件之间的过渡答案

【问题标题】：Trigger transition between components触发组件之间的过渡
【发布时间】：2018-09-12 09:26:26
【问题描述】：

背景故事

我正在尝试使用 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 转换的转换时，我不知道该怎么做。我什至不确定我现在是否走在正确的道路上。非常感谢任何帮助。

谢谢

【问题讨论】：

标签： javascript reactjs transition

【解决方案1】：

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

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

希望它对未来的人有所帮助！

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

【讨论】：