0

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>
Richard Hulse
  • 10,383
  • 2
  • 33
  • 37

1 Answers1

1

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

Peter Ambruzs
  • 7,763
  • 3
  • 30
  • 36
  • Thanks - Sorry, I should have added that there is already a timed delay before show is set to true. I needed a way to orchestrate X seconds delay at startup, then y seconds of the content div, then X seconds of delay and so on. Perhaps I should be doing this in plain old JS, not trying to do it in the Transition component. I was just trying to synchronously link the Y timer to point when Transition as completed 'enter'. Not a well-stated question. :-) – Richard Hulse Sep 23 '19 at 00:51
  • Your best bet is the use of timers. I do not know chained animation in ract-spring when you can declare time as parameter. And you have a second option to set the whole animation to time based and use the interpolate function to orchestrate your animation. But spring animation is way better than time based so I wouldl rule out second option. – Peter Ambruzs Sep 23 '19 at 06:27
  • Thanks Peter. I'll play around with timers and see what I can come up with. – Richard Hulse Sep 23 '19 at 07:16