动画 CSS 线性渐变在 Javascript 中百分比值的变化？

Question

我正在制作一个游戏，其中在进度条中跟踪分数占总可能分数的百分比。

现在，我有一个 javascript 方法来更新背景的线性渐变百分比，这会导致条形根据百分比变量的值立即更新为新的 position：

document.getElementById("pointThreshold").style.background = 'linear-gradient(to right, rgb(255, 230, 0) ' + percentage + '%, #1b1f20 0%)';

此代码有效并且进度条更新正确，但我希望能够为该百分比的变化设置动画。 我不确定如何完成此操作。 这是一件容易的事吗？

我设法让进度条立即更新，但不是动画格式。

Answer 1

这不是一件“容易做的事”，不是。 CSS 几乎可以做 animation 除了线性渐变之外的所有事情。 您只是选择了最糟糕的绘制进度条的方法。

如果您绝对必须使用渐变，您可以做的一件事有点复杂：

• 使用background-size将渐变背景缩放到容器大小的两倍。
• 使用background-position控制渐变的 position
• 使用transition动画background-position

运行此代码片段并单击黄色矩形以观看动画变化。 JavaScript 设置.style.backgroundPosition = "50%"; 触发该更改，CSS 会顺利处理动画。

 document.querySelector( "div" ).onclick = function() { this.style.backgroundPosition = "50%"; }

 div { width:200px; height:50px; background: linear-gradient(to right, rgb(255, 230, 0) 50%, #1b1f20 50.1% ); background-size: 200%; background-position: 0%; transition: background-position 1s; }

 <div></div>

最后，除非你被要求使用渐变，否则我不会。 所有这些东西都比渐变更容易处理：边框、框阴影、图像和绝对定位的子元素。 CSS 可以用一行很容易地为所有这些设置动画。

这是相同的效果，使用框左侧的黄色边框而不是线性渐变实现。 单击黑色矩形以查看黄色边框平滑地动画到更大的尺寸。

 document.querySelector( "div" ).onclick = function() { this.style.borderWidth = "0 0 0 " + 100 + "px"; }

 div { width: 200px; height: 50px; box-sizing: border-box; background-color: black; border:0px solid yellow; transition: border-width 1s; }

 <div></div>