Material UI:滑动过渡组件-可以改变变换距离吗？

Question

“向上”变换的默认起始变换是从窗口底部开始的(https://github.com/mui-org/material-ui/pull/16281/commits/6dc9988c7847fd262d14b10f1f8d1d6b49d8daa6)。

我正在努力寻找一种方法来改变这种状况。我只希望变换距离为12px。我在幻灯片组件上尝试了一个style道具，因为它可以在淡入淡出组件上工作，但没有成功。

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

Answer 1

可以使用Transition props here设置onEnter、onEntering和onEntered控制柄以执行所需的操作。

编辑:把我的例子放在这里，以防对以后的人有帮助。我找到了一种更好的方法来做到这一点，因为修改material ui <Slide>太痛苦了(它们的转换会卸载组件，所以没有任何东西可以通过偏移量保持渲染)我最终使用一些material ui主题帮助器制作了自己的<Transition>：

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>
  );
};