Slide transition component is not working when using 2 different slides

user_10477567 0
Viewed 714

When I use only one Slide, either on screen 1 text or screen 2, it works fine.

My question is why it's not working when I use two different slides?

I want to use two different slides so that if a user switches back and forth, it must show a transition.

I've tried this:

    export default function App() {
      const [step, setStep] = useState(1);
      const [slider, setSlider] = useState(false);
    
      const handlenext = () => {
        setStep(2);
        setSlider(true);
      };
    
      const handleprev = () => {
        setStep(1);
        setSlider(true);
      };
      return (
        <div className="App">
          {step === 1 ? (
            <Slide direction="up" in={slider} mountOnEnter unmountOnExit>
              <h1>this is screen 1</h1>
            </Slide>
          ) : (
            <Slide direction="up" in={slider} mountOnEnter unmountOnExit>
               <h1> screen 2</h1>
            </Slider>
          )}
    
          <Button onClick={() => handlenext()}>Next</Button>
          <Button onClick={() => handleprev()}>Previous</Button>
        </div>
      );
    }

and this:-

export default function App() {
  const [step, setStep] = useState(1);


  
  };
  return (
    <div className="App">
      {step === 1 ? (
        <Slide direction="up" in={true} mountOnEnter unmountOnExit>
          <h1>this is screen 1</h1>
        </Slide>
      ) : (
        <h1> screen 2</h1>
      )}

      <Button onClick={() => setStep(2)}>Next</Button>
      <Button onClick={() => setStep(1)}>Previous</Button>
    </div>
  );
}

pls check reproduction on the below link.

https://codesandbox.io/s/keen-shockley-oprtk?file=/src/App.js

material-ui next.js reactjs
1 Answers

Transitions does not work in conditional rendering.

So if you leave the hide and show functionality to the component itself so the transition will work.

Just remove the conditional rendering and give the state values to the in prop of the Slide component.

<Slide direction="up" in={step === 1} mountOnEnter unmountOnExit>
        <h1>this is screen 1</h1>
      </Slide>

      <Slide direction="up" in={step === 2} mountOnEnter unmountOnExit>
        <h1> screen 2</h1>
      </Slide>
user_51323370
Related