Material UI: Slide transition component - Is it possible to alter the transform distance?

Question

The default starting transform for an "up" transition is from the bottom of the window (https://github.com/mui-org/material-ui/pull/16281/commits/6dc9988c7847fd262d14b10f1f8d1d6b49d8daa6).

I'm struggling to find a way to change that. I only want the transform distance to be 12px. I tried a style prop on the Slide component since that works on a Fade component, but no luck.

<Slide
  in
  direction="up"
  timeout={500}
  style={{transform: 'translateY(12px)'}}
>
  <Card>
    ...
  </Card>
</Slide>

Answer 1

You can use the Transition props here to set onEnter, onEntering, and onEntered handles to do what you want.

edit: Putting my example here in case it helps someone later. I found a much better way to do this since hacking the material ui <Slide> was too painful (their Transition unmounts the component, so nothing can stay rendered with an offset) I ended up making my own <Transition> with some of the material ui theme helpers:

const HideOnScroll = ({ offset = 0, children }) => {
  const trigger = useScrollTrigger({ target: window });
  const theme = useTheme();
  return (
    <Transition
      appear={false}
      in={!trigger}
      timeout={0}
      onExited={(node) => {
        const { top, height } = node.getBoundingClientRect();
        const transform = `translateY(-${top + height - offset}px)`;
        node.style.transform = transform;
        node.style.webkitTransform = transform;

        const options = {
          duration: theme.transitions.duration.leavingScreen,
          easing: theme.transitions.easing.easeOut,
        };
        node.style.transition = theme.transitions.create(
          ['transform'],
          options
        );
        node.style.webkitTransition = theme.transitions.create(
          ['-webkit-transform'],
          options
        );
      }}
      onEntered={(node) => {
        node.style.transform = 'none';
        node.style.webkitTransform = 'none';

        const options = {
          duration: theme.transitions.duration.enteringScreen,
          easing: theme.transitions.easing.easeIn,
        };
        node.style.transition = theme.transitions.create(
          ['transform'],
          options
        );
        node.style.webkitTransition = theme.transitions.create(
          ['-webkit-transform'],
          options
        );
      }}
    >
      {children}
    </Transition>
  );
};