CODEWITHSUNDEEP
reactjsmaterial-ui
ololo
ololo

Reputation: 2076

Slide Up MUI both on open and on dismiss

I am using MUI Slide Transition component to display a dialog.

On the click of a button I succeeded in displaying the Dialog with a SlideUp Transition.

Now, on dismiss I also want it to Slide Up again to dismiss. How can that be achieved.

Here is the transition I used:

const Transition = React.forwardRef(function Transition(props, ref) {
    return <Slide
        direction="up"
        mountOnEnter
        unmountOnExit
        ref={ref} {...props} />;
});
       <Dialog
            open={openDialog}
            TransitionComponent={Transition}
            keepMounted
            onClose={handleClickAway}
        >

Upvotes: 1

Views: 2620

Answers (1)

NearHuscarl
NearHuscarl

Reputation: 81520

You can change the direction prop dynamically based on the current state of the component. Below is a component that slides up in both the in/out transitions:

function SlideUp(props) {
  const [direction, setDirection] = React.useState('up');

  return (
    <Slide
      {...props}
      direction={direction}
      onEntered={() => setDirection('down')}
      onExited={() => setDirection('up')}
    />
  );
}

Usage

<SlideUp in={checked} mountOnEnter unmountOnExit>
  {icon}
</SlideUp>

Live Demo

Codesandbox Demo

Upvotes: 1

Related Questions