CSS转换百分比（用于进度条）

Question

我正在尝试制作一个“进度条”与动画，改变了酒吧的背景颜色。

该条在0%时应该以红色开始，当它穿过元素时，在100%时会变为绿色。我的工作是100%（不，颜色不是很好，但这是一个未来的问题）...

null

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>

null

问题是（例如）在50%时，我无法使条“停止”在红色和绿色之间的50%过渡状态。

有没有一种方法可以计算颜色，因为它将在50%或让CSS停止过渡在一个特定的点？

你可以看到如果我有50%的价值...它仍然会一直到绿色，但会停在50%的宽度，但我想要它做的是停在50%的过渡颜色（即从红色到红色和绿色之间的中间）...

null

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>

null

Answer 1

您可以通过获取计算的样式并将其设置到bar元素（单击按钮）来执行类似的操作：-

null

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


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

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

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