如何旋转material-ui图标答案

【问题标题】：How to rotate material-ui icon如何旋转material-ui图标
【发布时间】：2021-07-25 17:28:34
【问题描述】：

我正在尝试使用 css 属性 animation 旋转 material-ui 图标，但没有得到想要的结果。有人可以帮我找出这里出了什么问题吗？

https://codesandbox.io/s/nifty-nightingale-v8sqh?file=/App.tsx

我的期望是一个连续旋转的图标。

【问题讨论】：

标签： reactjs typescript react-hooks material-ui css-animations

【解决方案1】：

动画名称（初始沙箱中的“spin”）必须引用一组关键帧。

直接的解决方案是直接定义关键帧（不理想、不整洁、不可扩展等），见下方样式标签中的关键帧。

您可能想查看https://styled-components.com/docs/api#keyframes 以获得更简洁的解决方案。

import React from "react";
import { Container, createStyles, makeStyles } from "@material-ui/core";
import LoopIcon from "@material-ui/icons/Loop";

export const useStyles = makeStyles(() =>
  createStyles({
    rotateIcon: {
      animation: "spin 4s linear infinite"
    }
  })
);

export default function App() {
  const classes = useStyles();

  return (
    <Container maxWidth="sm">
      <LoopIcon className={classes.rotateIcon} />
      <style>{`
            @keyframes spin {
                 0% { transform: rotate(360deg); }
                 100% { transform: rotate(0deg); }
            }
        `}</style>
    </Container>
  );
}

https://codesandbox.io/s/practical-fire-6k3cx?file=/App.tsx

【讨论】：

【解决方案2】：

你快到了！您可以在createStyles 定义中将rotateIcon 样式保留为@keyframes spin 样式。诀窍是在spin 前面加上一个$ 符号，所以它是$sign。然后它将起作用：

import React from "react";
import { Container, createStyles, makeStyles } from "@material-ui/core";
import LoopIcon from "@material-ui/icons/Loop";

export const useStyles = makeStyles(() =>
  createStyles({
    rotateIcon: {
      animation: "$spin 2s linear infinite"
    },
    "@keyframes spin": {
      "0%": {
        transform: "rotate(360deg)"
      },
      "100%": {
        transform: "rotate(0deg)"
      }
    }
  })
);

export default function App() {
  const classes = useStyles();
  return (
    <Container maxWidth="sm">
      <LoopIcon className={classes.rotateIcon} />
    </Container>
  );
}

【讨论】：