material-UI 上 makeStayles 的 transitionDelay

Question

const useStyles = makeStyles({
  buttonStyle: {
    background: "red",

    "&:hover": {
      transitionDelay: '1',
      transform: "scale(1.1)",
      background: "red",
    },
  },
});

how can i implemated i transitionDelay on makeStyles? This did not work.

Answer 1

您在这里遗漏了一些东西：

1. 您需要一个 transitionProperty，transitionDelay 将应用于该 transitionProperty。在你的情况下，它是 transform CSS 属性.
2. 您的 transitionDelay 需要包括延迟的单位，例如1s 或 1000ms.
3. 如果您想在按钮未处于悬停状态时将过渡应用到按钮，请将样式应用到按钮而不是 &:hover。

这就是它的样子：

const useStyles = makeStyles({
  buttonStyle: {
    background: "red",
    transitionProperty: "transform",
    transitionDelay: "1s",
    
    "&:hover": {
      transform: "scale(1.1)",
      background: "red",
    },
  },
});