When looking at the examples in the Material UI Transitions documentation, I noticed that there are cases where a button triggers a transition. In my scenario, I have a button that triggers a state change and I want the previous data to transition out before the new data transitions in. Currently, the only solution I have found is using a setTimeout. Is there a more efficient method to achieve this?
Check out the CodeSandbox example here
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 = () => {
this.setState({
elementIn: false
});
setTimeout(() => {
this.setState({
elementIn: true,
activeIndex: (this.state.activeIndex + 1) % words.length
});
}, transitionDuration);
};
render() {
const { activeIndex, elementIn } = this.state;
return (
<div>
<Button onClick={this.onClick}>Cycle</Button>
<Slide
in={this.state.elementIn}
timeout={transitionDuration}
direction="right"
>
<Typography variant="h1">{words[this.state.activeIndex]}</Typography>
</Slide>
</div>
);
}
}
export default TransitionCycle;
Is using setTimeout the most effective way to create back-to-back transitions in Material UI? It seems a bit unconventional.