Material UI transition out and in on single button click

Question

In the Material UI Transitions doc, 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 setTimeout. Is there a better way?

In CodeSandbox

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 this the best way to do back to back transitions in Material UI? It feels odd to use setTimeout.

score 1 · Answer 1 · answered Dec 17 '18 at 17:16

It's possible to use CSS transitions directly and to use an event listener instead of setTimeout to detect when the transition has happened, Mozilla provides documentation on that here: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions#Detecting_the_start_and_completion_of_a_transition

class MyComponent extends React.Component {
  updateTransition = () => {
    this.setState({
      elementIn: true,
      activeIndex: (this.state.activeIndex + 1) % words.length
    });
  }

  componentDidMount() {
    elementRef.addEventListener("transitionend", updateTransition, true);
  }
}

Don't forget to add the event listener on mounting and remove it on unmounting the component.

Marson Mao · Answer 2 · 2018-12-18T02:14:43.500

I think conditionally render all 3 Slides could solve your problem, here.

I also checked the source codes of Transition and it also uses setTimeout in the end, so I think it's not that "weird" to use it, but if the component already wraps the low-level api (I mean setTimeout) for us then we surely don't want to use it.

Edit:

As OP's comment, I found that I misread his example and didn't notice the out transition, so I modified my codes to meet the requirement. Now the previous Slide exits completely, then the next one enters. Everything is done by the component's designed props. (Still, the underlying Transition source codes are just wrapping the Rudolf Olah's method, but I just try to use only the designed props)

However, by only using Transition's props, I think it's impossible to achieve the "delay" entering what OP did using setTimeout, so if OP still wants to have that small delay before "Two" enters, you might still have to use setTimeout.

@ScottH You're right, my bad, I modified the codes, please check if it's what you need. — Marson Mao, Dec 18 '18 at 02:15

Material UI transition out and in on single button click

2 Answers2