CODEWITHSUNDEEP
react-spring
Richard Hulse
Richard Hulse

Reputation: 10493

Multistage transitions in react spring

I have a react-spring Transition starts when the component mounts. I want it to wait for 'x' seconds when enter is complete, then flip the show state so it can start leave.

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

Upvotes: 0

Views: 832

Answers (1)

Peter Ambruzs
Peter Ambruzs

Reputation: 8223

You must put the timeout to the componentDidMount lifecycle method. So it shows your content and the after 1 second it fades out and unmouts it. Do you need something like it?:

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

Upvotes: 1

Related Questions