Материальный интерфейс: компонент перехода между слайдами - можно ли изменить расстояние преобразования?

Question

По умолчанию начальное преобразование для перехода «вверх» находится в нижней части окна (https://github.com/mui-org/material-ui/pull/16281/commits/6dc9988c7847fd262d14b10f1f8d1d6b49d8daa6).

Я изо всех сил пытаюсь найти способ изменить это. Я хочу, чтобы расстояние трансформации было 12 пикселей. Я попробовал опору style для компонента Slide, поскольку она работает с компонентом Fade, но безуспешно.

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

Answer 1

Вы можете использовать Transition props здесь , чтобы установить onEnter, onEntering и onEntered дескрипторы, чтобы делать то, что вы хотите.

edit: Помещение моего примера здесь на случай, если это поможет кому-то позже. Я нашел гораздо лучший способ сделать это, так как взлом материала ui <Slide> был слишком болезненным (их Transition отключает компонент, поэтому ничто не может оставаться отрендеренным со смещением). В итоге я сделал свой собственный <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>
  );
};