Question

我有一个反应弹簧，在安装组件时开始过渡。我希望它在输入完成后等待'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

反应弹簧中的多级过渡

1 个答案: