单击包含按钮时旋转图标答案

【问题标题】：Rotate an icon when containing Button is clicked单击包含按钮时旋转图标
【发布时间】：2019-08-29 06:32:15
【问题描述】：

我有一个 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 到图标元素。但是只有当图标本身被点击而不是整个按钮时它才会旋转。

我也知道可以在点击处理程序中将transform 属性 (transform: rotate(180deg);) 动态添加到图标的 CSS，但这不会为过渡设置动画。

有什么建议吗？

P.S.：为了说明我在寻找什么，请查看https://www.flipkart.com/上的菜单选项更多@

【问题讨论】：

<Button style={{ transform: [{ rotate: blogMenu ? '180deg' : '0deg' }] }} /> 试过了吗？
这不会旋转整个按钮而不仅仅是箭头图标吗？此外，这不会为过渡设置动画。

标签： javascript material-ui transition

【解决方案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

【讨论】：