CSS 过渡百分比(对于进度条)

Question

>我正在尝试制作一个带有动画的"进度条"，以更改栏的背景颜色。

条形应在 0% 处以红色开头，当它穿过元素时，它会在 100% 处变为绿色。我已经让它 100% 工作(不，颜色不是很好，但这是未来的问题)......

setTimeout(function(){
var bar = document.getElementById("bar");
bar.style.width = "100%";
bar.classList.add("show");
},10);

#progress {
border:1px solid #888;
background-color:#eee;
height:
width:100%;
}
#bar {
height:30px;
background-color:red;
width:0;
transition: all ease 1s;
}
#bar.show {
background-color:lightgreen;
}

<div id="progress"><div id="bar"></div></div>

问题是(例如)在 50% 时，我无法让柱线在红色和绿色之间的 50% 过渡状态"停止"。

有没有办法计算颜色，因为它是 50% 或让 CSS 在特定点停止过渡？

你可以看到如果我有 50% 的值会发生什么......它仍然一直到绿色，但停在 50% 的宽度，但我希望它做的是在 50% 的过渡色处停止(即从红色到红色和绿色之间的中间位置)......

setTimeout(function(){
var bar = document.getElementById("bar");
bar.style.width = "50%";
bar.classList.add("show");
},10);

#progress {
border:1px solid #888;
background-color:#eee;
height:
width:100%;
}
#bar {
height:30px;
background-color:red;
width:0;
transition: all ease 1s;
}
#bar.show {
background-color:lightgreen;
}

<div id="progress"><div id="bar"></div></div>

附加信息(应0stone0要求) 加载页面时不会知道百分比值，但将通过 AJAX 调用提供。

Answer 1

">

停止"梯度过渡可能非常困难。

请考虑另一种方法，即手动计算所需的最终颜色的方法。使用此颜色值作为transition的目标。这样就没有必要"停止"过渡，因为最终颜色已经与百分比成正比。

我使用此函数根据百分比计算绿色和红色之间的梯度。

为了确保栏始终可点击，我们已将onClick移动到.progressdiv，以便我们可以以 0 宽度渲染.bar。

(根据评论更新了答案)

function load(progress, perc) {
var bar = progress.getElementsByClassName("bar")[0];
bar.style.width = perc.toString() + "%";
bar.style.backgroundColor = getGradient(perc / 100);
}
function getGradient(ratio) {
var color1 = '90ee90'; // lightgreen
var color2 = 'FF0000'; // red
var hex = function(x) {
x = x.toString(16);
return (x.length == 1) ? '0' + x : x;
};
var r = Math.ceil(parseInt(color1.substring(0,2), 16) * ratio + parseInt(color2.substring(0,2), 16) * (1-ratio));
var g = Math.ceil(parseInt(color1.substring(2,4), 16) * ratio + parseInt(color2.substring(2,4), 16) * (1-ratio));
var b = Math.ceil(parseInt(color1.substring(4,6), 16) * ratio + parseInt(color2.substring(4,6), 16) * (1-ratio));
return '#' + hex(r) + hex(g) + hex(b);
}

.progress {
border:1px solid #888;
background-color:#eee;
height:30px;
width:100%;
}
.bar {
height:30px;
background-color:red;
width:0;
transition: all ease 1s;
}

Click to run...<br/>
<div class="progress" onclick='load(this, 25)'><div class="bar">25%</div></div>
<div class="progress" onclick='load(this, 50)'><div class="bar">50%</div></div>
<div class="progress" onclick='load(this, 75)'><div class="bar">75%</div></div>
<div class="progress" onclick='load(this, 100)'><div class="bar">100%</div></div>

(原答案)

function load(bar, until) {
var p = 0;
setInterval(function() {

// Clear on complete
if (p > until) {
clearInterval(this);
return;
}

// Update Bar
bar.innerHTML = p;
bar.style.background = getGradient((p/1)/100);
bar.style.width = p + "%";

// Bump percentage 
p++;
}, 100);
}
function getGradient(ratio) {
var color1 = '90ee90'; // lightgreen
var color2 = 'FF0000'; // red
var hex = function(x) {
x = x.toString(16);
return (x.length == 1) ? '0' + x : x;
};
var r = Math.ceil(parseInt(color1.substring(0,2), 16) * ratio + parseInt(color2.substring(0,2), 16) * (1-ratio));
var g = Math.ceil(parseInt(color1.substring(2,4), 16) * ratio + parseInt(color2.substring(2,4), 16) * (1-ratio));
var b = Math.ceil(parseInt(color1.substring(4,6), 16) * ratio + parseInt(color2.substring(4,6), 16) * (1-ratio));
return '#' + hex(r) + hex(g) + hex(b);
}

.progress {
border:1px solid #888;
background-color:#eee;
height: 50px;
width:100%;
}
.bar {
height:100%;
width:100%;
}

<div class="progress"><div onClick='load(this, 100)' class="bar"></div></div>
<div class="progress"><div onClick='load(this, 50)'  class="bar"></div></div>

Answer 2

您可以通过获取计算样式并将其设置为bar元素(单击按钮)或当我们通过setInterval轮询达到progress元素的percentage宽度时执行以下操作：-

var bar = document.getElementById("bar");
setTimeout(function(){
bar.style.width = "100%";
bar.classList.add("show");
},10);

function stopProgressAt(percentage){
let interval = setInterval(()=>{
const progress = document.getElementById("progress");
const width = getComputedStyle(bar).getPropertyValue('width');
if((parseInt(width) * 100)/(Math.floor(progress.offsetWidth)) >= percentage ){
pauseTransition();
setTimeout(()=>clearInterval(interval),0);
}
},0)
}

function pauseTransition(){
const bgColor = getComputedStyle(bar).getPropertyValue('background-color');
const width = getComputedStyle(bar).getPropertyValue('width');
bar.style.width=width;
bar.style.backgroundColor=bgColor;
;}

stopProgressAt(66);

#progress {
border:1px solid #888;
background-color:#eee;
height:
width:100%;
}
#bar {
height:30px;
background-color:red;
width:0;
transition: all ease 1s;
}
#bar.show {
background-color:lightgreen;
}

<div id="progress"><div id="bar"></div></div>
<button onclick="pauseTransition()">Pause</button>

Answer 3

使用不透明的覆盖层，如下所示：

setTimeout(function() {
const hue = 120;
const size = 0.7;
const H = hue * size;
const L = (size < .5 ? 1 - size : size) * 50;
const hsl = `hsl(${H}, 100%, ${L}%)`;
const progress = document.getElementById('progress');
progress.style.setProperty('--size', size);
progress.style.setProperty('--hsl', hsl);
}, 500);

#progress {
--size: 0;
--hsl: hsl(0, 100%, 50%);
position: relative;
overflow: hidden;
width: 200px;
height: 20px;
border: 1px solid #888;
background-color: var(--hsl);
transition: background-color 1s;
}
#bar {
width: 100%;
height: 100%;
background: white;
transition: margin-left 1s;
margin-left: calc(var(--size) * 100%);
}

<div id="progress"><div id="bar"></div></div>