Question

我有一个Material-UI按钮，其标记如下所示：

<Button
  disableFocusRipple={true}
  disableRipple={true}
  color="inherit"
  onClick={openBlogMenu}
  className={classes.blogButtonStyle}
>
  <LibraryBooksIcon />
  Blog
  {!blogMenu && <KeyboardArrowDownIcon />}
  {blogMenu && <KeyboardArrowUpIcon />}
</Button>
<BlogDropDown pageURL={pageURL} />

此处，openBlogMenu更改了blogMenu的Redux状态，从而将BlogDropDown切换到视图中。显然，我还在阅读此状态，以在两个箭头图标KeyboardArrowDownIcon和KeyboardArrowUpIcon之间切换。

到目前为止，此设置可以顺利进行。但是，我很想完全放弃KeyboardArrowUpIcon，而是让KeyboardArrowDownIcon一下子旋转180度。

我知道这很简单，只需向图标元素添加可用的伪类之一，例如:active或:focus。但是只有在单击图标本身而不是整个按钮时，它才会旋转。

我还了解到，人们可以在点击处理程序中向图标的CSS动态添加一个transform属性（transform: rotate(180deg);），但这不会为过渡设置动画。

有什么提示吗？

PS ：要说明我要查找的内容，请查看https://www.flipkart.com/

上的菜单选项更多

Answer 1

您可以使用CSS仅翻转图标，而不翻转按钮。这是最适合我的解决方案：

const useStyles = makeStyles (theme => ({
    open : {
         transform: "scaleX(1)",
    },
    close: {
         transform: "scaleX(-1)",
    },
}));

export default function Test() {
    const classes = useStyles();
    const drawerToggle = () => { setOpen(!open) };
    const [open, setOpen] = React.useState(false);
    return (
        <IconButton aria-label="open drawer" onClick={drawerToggle} edge="start">
            <MenuOpenRoundedIcon className={clsx(!open && classes.close, open && classes.open)}/>
        </IconButton>
    )
}

根据按钮的状态，使用clsx（或任何等效的条件类选择器）分配何时需要翻转图标。在这里，我使用状态钩子open，并在单击时切换其布尔值。后来，我使用clsx根据open的值来确定我为 icon 分配了哪个类，即我需要朝哪个方向翻转。

如果要垂直翻转，可以改用scaleY。

这是我在代码沙箱中编写的带有Button和IconButton示例（垂直和水平）的代码：https://codesandbox.io/s/festive-maxwell-3kcge?file=/src/App.js

单击包含“按钮”时旋转图标

1 个答案: