【问题标题】：How to reset Material UI LinearProgress after completion?完成后如何重置 Material UI LinearProgress？
【发布时间】：2020-12-06 04:38:32
【问题描述】：

我有一个线性进度条，它在几秒钟内从 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}/>
    );
}

【问题讨论】：

您应该创建一个最小的可重现示例（可以在 codesandbox 上）

标签： material-ui progress-bar

【解决方案1】：

我也在寻找一种方法来禁用 LinearProgress 上从 100 到 0 的重置动画，并找到了一个结合您链接的两个线程的解决方案：

当aria-valuenow 属性的值为0（找到here）时，通过使用transition: none（找到here）可以在没有动画的情况下重置为0。但是，这不通常适用于减小值。它仅适用于重置为 0。

Sandbox with visualized example

进度条组件

    <LinearProgress
      className={classes.progressBar}
      variant="determinate"
      value={progress}
      classes={{ bar: classes.progressBarInner }}
    />

CSS

        progressBar: {
          // Disable the transition animation from 100 to 0 inside the progress bar
          '&[aria-valuenow="0"]': {
            "& > $progressBarInner": {
              transition: "none"
            }
          }
        },
        progressBarInner: {}

【讨论】：