如何提高Material UI的整体动画速度

Question

如何提高Material UI的整体动画速度，例如drawer内有一个material UI组件，并且可以打开或关闭它，如何增加它动画速度？
更好的方法是如何提高material UI中的所有动画速度？

Answer 1

本地覆盖

您可以通过向组件添加<Drawer>道具来更改transitionDuration的过渡时间。

<Drawer transitionDuration={1000}>  // time for entering and leaving in ms

如果您想要不同的出入时间，则：

<Drawer transitionDuration={{ enter: 500, exit: 1000 }}>

Documentation

实时演示：

全局覆盖

关于全局覆盖。应该可以通过使用<ThemeProvider>组件并将自定义主题注入应用程序来实现。然后，您可以覆盖许多内容，其中之一是动画持续时间：

import { MuiThemeProvider, createMuiTheme } from "@material-ui/core/styles";

const theme = createMuiTheme({
  // here are default values in ms
  transitions: {
    duration: {
      shortest: 150,
      shorter: 200,
      short: 250,
      standard: 300,
      complex: 375,
      enteringScreen: 225,
      leavingScreen: 195,
    }
  }
}); 

function App() {
    return (
        <MuiThemeProvider theme={theme}>
            <RestOfYourApp />
        </MuiThemeProvider>
    );
}

它可以工作...例如，<Button>组件：

尝试在上面的示例中将鼠标悬停在按钮上，这需要1000毫秒才能完成转换。 但是很遗憾，它不适用于<Drawer>组件。

从进入Screen和离开Screen主题属性需要花费一些时间，但是看起来像属性are hardcoded in source code。

因此，更改<Drawer>过渡持续时间的唯一方法是向组件中添加transitionDuration道具。