如何实现MUI背景渐变颜色的平滑过渡效果？

CSS的transition属性不支持直接在两个linear-gradient背景之间创建过渡动画——因为渐变本质是背景图像，而非单一的颜色值，浏览器无法对两种不同的背景图像做平滑插值计算，这就是为什么纯色过渡正常但渐变不行的核心原因。

下面提供两种可行的解决方案：

方案一：伪元素叠加渐变，过渡透明度 #

通过给容器添加一个伪元素容器，分别承载两种渐变背景，通过切换两者的opacity实现平滑过渡：

const Home: React.FC = () => {
  const _authContext = useContext(authContext);
  const isAdmin = _authContext.starterUserType === 'admin';

  return (
    <div
      style={{
        minHeight: '100vh',
        marginTop: 0,
        marginBottom: -50,
        justifyContent: 'center',
        position: 'relative',
        background: 'linear-gradient(360deg, #fe6b8b 30%, #7DF9FF 70%)',
        transition: 'opacity 1s ease',
        opacity: isAdmin ? 0 : 1
      }}
    >
      {/* 承载管理员渐变的层 */}
      <div
        style={{
          position: 'absolute',
          inset: 0,
          background: 'linear-gradient(360deg, #dfe566 30%, #7DF334 70%)',
          transition: 'opacity 1s ease',
          opacity: isAdmin ? 1 : 0
        }}
      />
    </div>
  );
};

export default Home;

方案二：CSS变量定义渐变颜色，过渡颜色值（仅限渐变结构一致时） #

如果两种渐变的角度、色标位置完全相同，只是颜色不同，可以用CSS变量定义渐变颜色，再过渡变量对应的颜色值：

const Home: React.FC = () => {
  const _authContext = useContext(authContext);
  const isAdmin = _authContext.starterUserType === 'admin';

  return (
    <div
      style={{
        minHeight: '100vh',
        marginTop: 0,
        marginBottom: -50,
        justifyContent: 'center',
        // 用CSS变量存储渐变颜色
        '--grad-color-1': isAdmin ? '#dfe566' : '#fe6b8b',
        '--grad-color-2': isAdmin ? '#7DF334' : '#7DF9FF',
        background: 'linear-gradient(360deg, var(--grad-color-1) 30%, var(--grad-color-2) 70%)',
        transition: '--grad-color-1 1s ease, --grad-color-2 1s ease'
      }}
    />
  );
};

export default Home;

注：方案二需要现代浏览器支持CSS变量的过渡特性，若需兼容旧版浏览器，方案一更稳妥。

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