按钮的悬停过渡效果
按钮的悬停过渡效果
提问于 2019-08-10 10:38:56
我尝试为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
谢谢。
回答 1
Stack Overflow用户
回答已采纳
发布于 2019-08-10 10:55:21
像在纯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"
}
}
});传递的主题是不必要的，只有当你想使用默认Material-UI主题对象上可用的过渡样式时，你才应该使用它，而你在这里不需要它。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/57438880
复制相关文章
相似问题
腾讯云开发者
