Question

我尝试为Material UI中的Button元素添加一秒钟的过渡，从正常配色方案到悬停颜色。我使用本文中在这里讨论的方法transitions.create(props, options)：https://medium.com/@octaviocoria/custom-css-transitions-with-react-material-ui-5d41cb2e7c5。实际上过渡效果可以，但是只要鼠标悬停在按钮上，悬停颜色也会立即显示在按钮上。如何立即停止颜色更改，但要等待过渡使其更改。

相关代码：

function Mbutton({ classes }) {
  return (
    <Button variant="outlined" className={classes.cart} disableRipple>
      Add to Cart
    </Button>
  );
}

const styles = theme => ({
  cart: {
    padding: "6px 16px",
    borderRadius: 0,
    border: "2px solid #000",
    "&:hover": {
      transition: theme.transitions.create(["backgroundColor", "color"], {
        duration: 1000
      }),
      backgroundColor: "#000",
      color: "#fff"
    }
  }
});

还可以在代码沙箱上进行检查：https://codesandbox.io/s/mbutton-fogco

谢谢。

Answer 1

像在普通CSS中一样编写

const styles = theme => ({
    cart: {
        padding: "6px 16px",
        borderRadius: 0,
        border: "2px solid #000",
        backgroundColor: "white",
        color: "black",
        transition: "background 1s, color 1s",
        "&:hover": {
        backgroundColor: "#000",
        color: "#fff"
        }
    }
});

CodeSandBox

传递的主题是不必要的，仅当您要使用默认Material-UI主题对象上可用的过渡样式时才应使用该主题，而在此不需要。

按钮的悬停过渡效果

1 个答案: