React中内联样式传颜色致div填充动画失效的原因问询

核心原因 #

当你通过内联样式设置background: linear-gradient(...)时，background是CSS简写属性，它会隐式重置所有background-*相关子属性（包括background-size、background-position）为默认值，直接覆盖掉CSS类中定义的background-size: 200% 100%和background-position: right。动画依赖的背景尺寸与初始位置完全失效，自然无法正常运行。

解决办法 #

放弃background简写属性，改用具体的子属性background-image设置渐变，这样就不会影响其他background-*属性的生效：

修复后代码示例 #

CSS部分

.container {
    position: relative;
    width: 500px;
}

.filling {
    border: 1px solid black;
    border-radius: 3px;
    width: 500px;
    height: 30px;
    display: block;
    background-size: 200% 100%;
    background-position: right;
    animation: fill-div-with-color 8s 1s forwards;
}

@keyframes fill-div-with-color {
    100% { background-position: left;}
}

HTML/JSX部分

<div class="container">
    <div class="filling" style="background-image: linear-gradient(to right, black 50%, transparent 0);"></div>
</div>

React动态颜色实现方案 #

如果需要在React中动态传递颜色，直接拼接background-image的值即可：

const fillColor = 'black'; // 可替换为动态变量
return (
    <div className="container">
        <div 
            className="filling" 
            style={{ 
                backgroundImage: `linear-gradient(to right, ${fillColor} 50%, transparent 0)` 
            }} 
        />
    </div>
);

内容的提问来源于stack exchange，提问作者four-eyes