小编Neï*_*uni的帖子

如何充满情感地使用theme.transitions.create?

我在 Material-UI v4 中有这段代码,运行得很好:

<Button
  aria-expanded={optionsExpanded}
  onClick={() => dispatch(toggleOptionsExpanded())}
    endIcon={
      <ExpandMoreIcon
        className={clsx(classes.expand, {
          [classes.expandOpen]: optionsExpanded,
        })}
      />
  }
>
  Options
</Button>



const useStyles = makeStyles((theme) => ({
  expand: {
    transform: "rotate(0deg)",
      transition: theme.transitions.create("transform", {
      duration: theme.transitions.duration.shortest,
    }),
  },
  expandOpen: {
    transform: "rotate(180deg)",
  },
}));
Run Code Online (Sandbox Code Playgroud)

箭头将像这样旋转:

在此输入图像描述

然而,我似乎无法使用 Material-UI v5 来复制这一点。我尝试过使用sx带有条件渲染的道具,它会转动但不会产生动画。

emotion reactjs material-ui

7
推荐指数
1
解决办法
4734
查看次数

标签 统计

emotion ×1

material-ui ×1

reactjs ×1