Material UI transition out and in on single button click : <p>In the Material UI <a href="https://material-ui.com/utils/transitions/" rel="noreferrer">Transitions doc</a>, there are examples where a button triggers a transition. I have a case where a button triggers a state change and I want the former data to transition out and then the new data to transition in. The only way I have found to do this is with <code>setTimeout</code>. Is there a better way?</p>

<p><a href="https://codesandbox.io/s/op4x52yvz" rel="noreferrer">In CodeSandbox</a></p>

<pre><code>import React from "react";
import Slide from "@material-ui/core/Slide";
import Button from "@material-ui/core/Button";
import Typography from "@material-ui/core/Typography";

const words = ["one", "two", "three"];
const transitionDuration = 500;

class TransitionCycle extends React.Component {
  state = {
    activeIndex: 0,
    elementIn: true
  };

  onClick = () =&gt; {
    this.setState({
      elementIn: false
    });
    setTimeout(() =&gt; {
      this.setState({
        elementIn: true,
        activeIndex: (this.state.activeIndex + 1) % words.length
      });
    }, transitionDuration);
  };

  render() {
    const { activeIndex, elementIn } = this.state;

    return (
      &lt;div&gt;
        &lt;Button onClick={this.onClick}&gt;Cycle&lt;/Button&gt;
        &lt;Slide
          in={this.state.elementIn}
          timeout={transitionDuration}
          direction="right"
        &gt;
          &lt;Typography variant="h1"&gt;{words[this.state.activeIndex]}&lt;/Typography&gt;
        &lt;/Slide&gt;
      &lt;/div&gt;
    );
  }
}

export default TransitionCycle;
</code></pre>

<p>Is this the best way to do back to back transitions in Material UI? It feels odd to use <code>setTimeout</code>.</p>
