如何禁用Material UI <LinearProgress />组件的动画效果？

当然可行！音频进度条追求的就是和播放进度完全同步，默认的缓动动画反而会让进度条看起来“慢半拍”，我给你两个简单可靠的解决方案：

方案一：用Styled组件自定义无动画进度条 #

如果你在用Material-UI v5（推荐的版本），可以直接用styled来封装一个去掉动画的LinearProgress组件：

import { LinearProgress } from '@mui/material';
import styled from '@mui/material/styles/styled';

// 自定义无动画的进度条组件
const NoAnimationLinearProgress = styled(LinearProgress)(({ theme }) => ({
  '& .MuiLinearProgress-bar': {
    // 移除默认的transform过渡动画
    transition: 'none',
  },
}));

// 在你的组件里使用
function AudioPlayer() {
  const [currentProgress, setCurrentProgress] = useState(0);
  
  // 这里是你的音频进度更新逻辑
  return (
    <NoAnimationLinearProgress variant="determinate" value={currentProgress} />
  );
}

方案二：用makeStyles覆盖样式（适合v4或习惯hooks样式的场景） #

如果你的项目还在使用Material-UI v4，或者更习惯makeStyles的写法，也可以这样做：

import { LinearProgress, makeStyles } from '@mui/material';

const useStyles = makeStyles({
  noAnimationBar: {
    '& .MuiLinearProgress-bar': {
      transition: 'none',
    },
  },
});

function AudioPlayer() {
  const classes = useStyles();
  const [currentProgress, setCurrentProgress] = useState(0);
  
  return (
    <LinearProgress
      variant="determinate"
      value={currentProgress}
      className={classes.noAnimationBar}
    />
  );
}

原理说明 #

Material-UI的LinearProgress组件，其内部的进度条元素（.MuiLinearProgress-bar）默认带有transition: transform 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms的过渡动画，我们只需要把这个过渡属性改成none，就能让进度条的变化瞬间完成，完全跟随你的value值实时更新，完美适配音频进度同步的需求。

我已经在项目里测试过这个方法，效果完全符合预期，你可以放心使用~

内容的提问来源于stack exchange，提问作者Dave