我在 React 应用程序中使用具有不确定变体的 LinearProgressBar 来提供操作正在进行的反馈。
我发现动画太快了,有办法降低速度吗?
LinearProgress 组件中没有提供用于调整动画速度的道具,因此您必须使用类覆盖来覆盖默认样式。在这种情况下,我会增加
animation-duration
来减慢速度:
import { withStyles } from "@material-ui/core/styles";
import LinearProgress from "@material-ui/core/LinearProgress";
const SlowLinearProgress = withStyles({
bar: {
// apply a new animation-duration to the `.bar` class
animationDuration: "8s"
}
})(LinearProgress);
export default SlowLinearProgress;
对于 Material-UI v5,您可以使用
styled
代替 withStyles
:
import { styled } from "@material-ui/core/styles";
import LinearProgress from "@material-ui/core/LinearProgress";
const SlowLinearProgress = styled(LinearProgress)({
"& .MuiLinearProgress-bar": {
// apply a new animation-duration to the `.bar` class
animationDuration: "8s"
}
});
export default SlowLinearProgress;
这是我如何使用圆形装载机和
sx
道具做到这一点。
function CircularLoader(props: { duration: number }) {
const [value, setValue] = useState(0);
useEffect(() => {
setValue(100);
}, []);
return (
<CircularProgress
sx={{
"& .MuiCircularProgress-circle": {
transitionDuration: `${props.duration}s`,
transitionTimingFunction: "linear",
},
}}
variant="determinate"
value={value}
/>
);
}
// example 3s loader
<CircularLoader duration={3} />;