我已经学会了在 CSS 中使用动画@keyframe。但是，我想将自定义动画代码写入我的 React 项目（使用 MUI）。我的挑战是如何使用makeStyle()MUI编写 Javascript 代码来自定义我的动画。
这次我希望能够在 MUI 中以百分比形式自定义转换过程。我需要能够编写这样的代码，makeStyle()但我似乎不知道该怎么做。
@keyframes myEffect {
0%{
opacity:0;
transform: translateY(-200%);
}
100% {
opacity:1;
transform: translateY(0);
}
}
这是一个演示其中keyframes语法的示例makeStyles：
import React from "react";
import ReactDOM from "react-dom";
import { makeStyles } from "@material-ui/core/styles";
import Button from "@material-ui/core/Button";
import clsx from "clsx";
const useStyles = makeStyles(theme => ({
animatedItem: {
animation: `$myEffect 3000ms ${theme.transitions.easing.easeInOut}`
},
animatedItemExiting: {
animation: `$myEffectExit 3000ms ${theme.transitions.easing.easeInOut}`,
opacity: 0,
transform: "translateY(-200%)"
},
"@keyframes myEffect": {
"0%": {
opacity: 0,
transform: "translateY(-200%)"
},
"100%": {
opacity: 1,
transform: "translateY(0)"
}
},
"@keyframes myEffectExit": {
"0%": {
opacity: 1,
transform: "translateY(0)"
},
"100%": {
opacity: 0,
transform: "translateY(-200%)"
}
}
}));
function App() {
const classes = useStyles();
const [exit, setExit] = React.useState(false);
return (
<>
<div
className={clsx(classes.animatedItem, {
[classes.animatedItemExiting]: exit
})}
>
<h1>Hello CodeSandbox</h1>
<h2>Start editing to see some magic happen!</h2>
<Button onClick={() => setExit(true)}>Click to exit</Button>
</div>
{exit && <Button onClick={() => setExit(false)}>Click to enter</Button>}
</>
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
文档：https : //cssinjs.org/jss-syntax/?v=v10.0.0#keyframes-animation
对于那些已经开始使用 Material-UI v5 并想知道如何使用 Emotion 而不是 来做到这一点的人makeStyles，下面是使用 Emotion 执行等效样式的一种方法的示例。
/** @jsxImportSource @emotion/react */
import React from "react";
import ReactDOM from "react-dom";
import { css, keyframes } from "@emotion/react";
import { useTheme } from "@mui/material/styles";
import Button from "@mui/material/Button";
const myEffect = keyframes`
0% {
opacity: 0;
transform: translateY(-200%);
}
100% {
opacity: 1;
transform: translateY(0);
}
`;
const myEffectExit = keyframes`
0% {
opacity: 1;
transform: translateY(0);
}
100% {
opacity: 0;
transform: translateY(-200%);
}
`;
function App() {
const theme = useTheme();
const animatedItem = css`
animation: ${myEffect} 3000ms ${theme.transitions.easing.easeInOut};
`;
const animatedItemExiting = css`
animation: ${myEffectExit} 3000ms ${theme.transitions.easing.easeInOut};
opacity: 0;
transform: translateY(-200%);
`;
const [exit, setExit] = React.useState(false);
return (
<>
<div css={exit ? animatedItemExiting : animatedItem}>
<h1>Hello CodeSandbox</h1>
<h2>Start editing to see some magic happen!</h2>
<Button onClick={() => setExit(true)}>Click to exit</Button>
</div>
{exit && <Button onClick={() => setExit(false)}>Click to enter</Button>}
</>
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
情感关键帧文档：https : //emotion.sh/docs/keyframes
V5
在 v5 中，您可以使用该keyframes函数（默认情况下从情感重新导出）生成关键帧的样式表：
import { styled } from '@mui/material/styles';
import { keyframes } from '@mui/system';
const spin = keyframes`
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
`;
const RotatedBox = styled("div")({
backgroundColor: "pink",
width: 30,
height: 30,
animation: `${spin} 1s infinite ease`
});
因为styled/ sxprop 内部都使用了情感，所以你可以将相同的样式对象传递给sxprop：
<Box
sx={{
backgroundColor: "pink",
width: 30,
height: 30,
animation: `${spin} 1s infinite ease`
}}
/>
V4
只是在@Ryan 的回答之上的一些注释。如果您定义keyframeusing makeStyles. 请记住在动画名称前加上$. 我第一次错过了这个小细节，我的代码不起作用，在下面的例子中
const useStyles = makeStyles({
"@keyframes fadeIn": {
"0%": {
opacity: 0,
transform: "translateY(5rem)"
},
"100%": {
opacity: 1,
transform: "translateY(0)"
}
},
selector: {
animation: "$fadeIn .2s ease-in-out"
}
});
代替
animation: "fadeIn .2s ease-in-out"
它应该是
animation: "$fadeIn .2s ease-in-out"
但是如果你keyframe在全局范围内定义。这里不需要前缀
const useStyles = makeStyles({
"@global": {
"@keyframes fadeIn": {
"0%": {
opacity: 0,
transform: "translateY(5rem)"
},
"100%": {
opacity: 1,
transform: "translateY(0)"
}
}
},
selector: {
animation: "fadeIn .2s ease-in-out" // --> this works
}
});