我正在尝试制作超过 60 秒的动画，这是我目前所拥有的：
export default function TimeLoader({ timeout }: ITimeLoaderProps) {
const [progress, setProgress] = useState(1);
useInterval(() => {
setProgress(p => Math.min(p * 1.1, 100));
}, 100);
console.log({ progress });
return (
<LinearProgress variant="determinate" value={progress} />
);
}
但显然这不是在 60 秒内完成的。它完成得相当快。如果我将超时时间从 100 增加到其他时间，那么它有点生涩。
谢谢！
下面的示例使用 CSS 而不是 JS 来动画进度条超过 60 秒。它通过使用indeterminate变体来实现这一点，然后自定义其 CSS。该indeterminate变体在其动画中利用了两个条。此示例抑制第二个条形并将第一个条形更改为 60 秒以上的动画一次，而不是2.1 秒无限重复。此示例还更改了动画的关键帧部分，使其以完整条结束，而不是以条消失结束。forwards在动画中使用会导致最终状态在动画完成时保持不变。
import React from "react";
import { makeStyles } from "@material-ui/core/styles";
import LinearProgress from "@material-ui/core/LinearProgress";
const useStyles = makeStyles({
root: {
width: "100%"
},
bar1Indeterminate: {
width: "auto",
animation: "$indeterminate1 60s linear forwards"
},
bar2Indeterminate: {
display: "none"
},
"@keyframes indeterminate1": {
"0%": {
left: "-35%",
right: "100%"
},
"100%": {
left: "0%",
right: "0%"
}
}
});
export default function LinearDeterminate() {
const classes = useStyles();
return (
<div className={classes.root}>
<LinearProgress
classes={{
bar1Indeterminate: classes.bar1Indeterminate,
bar2Indeterminate: classes.bar2Indeterminate
}}
variant="indeterminate"
/>
</div>
);
}
相关文档：
这是使用 v5 的 Material-UIstyled和 Emotion's的等效示例keyframes：
import React from "react";
import { styled } from "@material-ui/core/styles";
import LinearProgress from "@material-ui/core/LinearProgress";
import { keyframes } from "@emotion/react";
const indeterminate1Keyframes = keyframes({
"0%": {
left: "-35%",
right: "100%"
},
"100%": {
left: "0%",
right: "0%"
}
});
const StyledLinearProgress = styled(LinearProgress)({
"& .MuiLinearProgress-bar1Indeterminate": {
width: "auto",
animation: `${indeterminate1Keyframes} 60s linear forwards`
},
"& .MuiLinearProgress-bar2Indeterminate": {
display: "none"
}
});
export default function LinearDeterminate() {
return (
<div style={{ width: "100%" }}>
<StyledLinearProgress variant="indeterminate" />
</div>
);
}