时间戳

首页 > 解决方案 > 触发组件之间的过渡

javascript - 触发组件之间的过渡

问题描述

背景故事

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

谢谢

标签： javascriptreactjstransition

解决方案

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

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

希望它可以帮助将来的人！

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

推荐阅读