MUI：覆盖幻灯片过渡组件中的缓动/计时功能

Question

如何向 Material-UISlide组件添加缓动？我没有看到允许这样做的道具。但我在某处读到过一些关于传播道具的内容？

<Slide
  in={variable}
  timeout={500}
  direction="right"
  mountOnEnter={true}
  unmountOnExit={true}
>
    <Child />
</Slide>

Answer 1

Slide在 MUI v5 中，您可以通过覆盖props 来更改组件的默认计时函数easing：

<Slide
  direction="up"
  in={checked}
  easing={{
    enter: "cubic-bezier(0, 1.5, .8, 1)",
    exit: "linear"
  }}
>
  {icon}
</Slide>

theme.transitions.easing.easeOut在 MUI v4 中，您需要覆盖为进入转换和theme.transitions.easing.sharp退出转换定义的计时函数。

const theme = createMuiTheme({
  transitions: {
    easing: {
      easeOut: "cubic-bezier(0, 1.5, .8, 1)",
      sharp: "linear"
    }
  }
});

<ThemeProvider theme={theme}>
  <Slide direction="up" in={checked}>
    {icon}
  </Slide>
</ThemeProvider>