首页 > 解决方案 > 材质 UI 上 makeStayles 上的 transitionDelay

问题描述

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

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

我如何在 makeStyles 上实现我的 transitionDelay?这没有用。

标签: material-uimakestyles

解决方案


你在这里遗漏了一些东西:

  1. 您需要遗嘱适用的transitionPropertytransitionDelay在您的情况下,它是transformCSS 属性。
  2. transitionDelay需要包括延迟单位,例如1s1000ms
  3. 如果您想在按钮未处于悬停状态时对其应用转换,则将样式应用于按钮而不是&:hover.

这就是它的样子:

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

推荐阅读