react-spring - 反应弹簧中的多级转换

Question

当组件安装时，我有一个 react-spring 过渡。我希望它在输入完成后等待“x”秒，然后翻转显示状态以便它可以开始离开。

<Transition
    items={show}
    from={{ ...styles, position: "absolute", opacity: 0 }}
    enter={{ opacity: 1 }}
    leave={{ opacity: 0 }}
  >
    {show => show && (props => <div style={props}>{content}</div>)}
</Transition>

Answer 1

您必须将超时设置为 componentDidMount 生命周期方法。因此，它会显示您的内容，并在 1 秒后淡出并取消显示。你需要类似的东西吗？：

class App extends React.Component {
  state = {
    show: true
  };

  componentDidMount() {
    setTimeout(() => this.setState({ show: false }), 1000);
  }

  render() {
    const { show } = this.state;
    const content = <div>eeeeeeeee</div>;
    return (
      <div className="App">
        <Transition
          items={[show]}
          from={{ position: "absolute", opacity: 0 }}
          enter={{ opacity: 1 }}
          leave={{ opacity: 0 }}
        >
          {show =>
            show &&
            (props => <animated.div style={props}>{content}</animated.div>)
          }
        </Transition>
      </div>
    );
  }
}

https://codesandbox.io/s/keen-almeida-5wlk7