完成后如何重置Material UI LinearProgress？ Sandbox with visualized example

问题描述

我有一个LinearProgress栏，它在几秒钟内从0变到100，然后跳回0并重复。

<LinearProgress variant="determinate" value={progress}/>

第一次加载动画效果很好。在达到100之后，由于向0的长时间过渡，跳回0最终仅达到大约30。如果我turn off animations altogether，从100跳到0是干净的，但是从0跳到100的过程是断断续续的。

是否可以在不更换组件的情况下增加动画/过渡，但又不能减少/重置动画/过渡？我看到it's answered here用于React Bootstrap，不确定我是否可以在此处应用类似的技术。

这可以正常工作，但是如果可能的话，我真的很想避免交换组件：

const NoTransitionLinearProgress = withStyles({
  bar: {
    transition: 'none'
  }
})(LinearProgress);

const ProgressBar = () => {
    const progress = useSelector(state => state.progress);
  
    if (progress > 0) {
      return (
        <LinearProgress variant="determinate" value={progress}/>
      );
    }
    return (
      <NoTransitionLinearProgress variant="determinate" value={progress}/>
    );
}

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

material-ui progress-bar