CSS 過渡百分比（用於進度條）

Question

我正在嘗試使用 animation 制作一個“進度條”，以更改進度條的背景顏色。

該條應以 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% 過渡 state 處“停止”。

有沒有辦法計算顏色為 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的目標。 這樣就不需要“停止”過渡，因為最終顏色已經與百分比成正比。

我使用這個 function根據百分比計算綠色和紅色之間的梯度。

為確保欄始終可點擊，我們將onClick移至.progress div，以便我們可以將.bar渲染為 0 寬度。

（更新的答案，基於評論）

 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

您可以通過獲取計算的 styles 並將其設置為您的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>