Flexbox 进度条动画 - 宽度不正确

Question

我正在尝试创建一个带有动画的进度条。如果我没有内部文本，它会起作用，但是一旦我添加内部文本，宽度计算就会因某种原因而不同。我尝试过使用不同的 width() 函数，并且尝试将每个段相加，但每次文本由于某种原因而超出宽度时。

这就是我所拥有的 - JSFiddle

/** Progress Bar Animation **/
function animate_progress_bar() {
  if (!$('.progressBar').length) {
    return false;
  }

  $('.progressBar').each(function() {
    var num_total = $(this).find('.seg').length;
    var num_fill = $(this).find('.fill').length;
    var percent = 100 - ((num_fill / num_total) * 100);
    var speed = 2000 / num_fill;

    $(this).find('.progradient').animate({
      'width': percent + '%'
    }, speed);
  });
}
animate_progress_bar();

.flex {
  display: -webkit-flex;
  display: flex;
}
.flex > * {
  -ms-flex: 0 1 auto;
}
.progressBar {
  display: -webkit-flex;
  display: flex;
  border: 1px solid #000;
  border-radius: 20px;
  overflow: hidden;
  position: relative;
  margin-bottom: 40px;
}
.progressBar .seg {
  -webkit-flex-grow: 1;
  flex-grow: 1;
  min-height: 20px;
  border-right: 1px solid #000;
  z-index: 2;
}
.progressBar .seg:last-of-type {
  border-right: 0;
}
.progressBar:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  background: rgb(30, 87, 153);
  background: -moz-linear-gradient(left, rgba(30, 87, 153, 1) 0%, rgba(41, 137, 216, 1) 27%, rgba(30, 87, 153, 1) 74%, rgba(125, 185, 232, 1) 100%);
  background: -webkit-linear-gradient(left, rgba(30, 87, 153, 1) 0%, rgba(41, 137, 216, 1) 27%, rgba(30, 87, 153, 1) 74%, rgba(125, 185, 232, 1) 100%);
  background: linear-gradient(to right, rgba(30, 87, 153, 1) 0%, rgba(41, 137, 216, 1) 27%, rgba(30, 87, 153, 1) 74%, rgba(125, 185, 232, 1) 100%);
  filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#1e5799', endColorstr='#7db9e8', GradientType=1);
}
.progressBar .progradient {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  background-color: #fff;
}
.progressBar.large {
  border-radius: 40px;
}
.progressBar.large .seg {
  min-height: 40px;
}
.progressBar.large .text {
  -webkit-flex-grow: 1;
  flex-grow: 1;
  -webkit-align-self: center;
  align-self: center;
  font-size: 18px;
  text-align: center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="max-width: 160px">
  <div class="progressBar small">
    <div class="seg fill"></div>
    <div class="seg fill"></div>
    <div class="seg"></div>
    <div class="seg"></div>
    <div class="seg"></div>
    <div class="progradient"></div>
  </div>
</div>

<div class="progressBar large">
  <div class="seg fill"></div>
  <div class="seg fill"></div>
  <div class="seg fill"></div>
  <div class="seg"></div>
  <div class="seg"></div>
  <div class="progradient"></div>
</div>

<div class="progressBar large">
  <div class="seg fill flex">
    <div class="text">Test</div>
  </div>
  <div class="seg fill flex">
    <div class="text">Test</div>
  </div>
  <div class="seg fill flex">
    <div class="text">Test</div>
  </div>
  <div class="seg"></div>
  <div class="seg"></div>
  <div class="progradient"></div>
</div>

Answer 1

您只需将flex: 1; 添加到您的段类。

---

弹性：<positive-number>：

等效于 flex：<positive-number> 1 0。使弹性项目灵活并将弹性基础设置为零， 导致获得指定比例的项目 flex 容器中的可用空间。如果 flex 容器中的所有项目 使用这种模式，它们的大小将与指定的成正比 弹性系数。

来源：W3C

---

类已更改：

.progressBar.large .seg {
    min-height: 40px;
    flex: 1; /* Added property*/
}

---

代码片段：

/** Progress Bar Animation **/
function animate_progress_bar() {
  if (!$('.progressBar').length) {
    return false;
  }

  $('.progressBar').each(function() {
    var num_total = $(this).find('.seg').length;
    var num_fill = $(this).find('.fill').length;
    var percent = 100 - ((num_fill / num_total) * 100);
    var speed = 2000 / num_fill;

    $(this).find('.progradient').animate({
      'width': percent + '%'
    }, speed);
  });
}
animate_progress_bar();

.flex {
  display: -webkit-flex;
  display: flex;
}
.flex > * {
  -ms-flex: 0 1 auto;
}
.progressBar {
  display: -webkit-flex;
  display: flex;
  border: 1px solid #000;
  border-radius: 20px;
  overflow: hidden;
  position: relative;
  margin-bottom: 40px;
}
.progressBar .seg {
  -webkit-flex-grow: 1;
  flex-grow: 1;
  min-height: 20px;
  border-right: 1px solid #000;
  z-index: 2;
}
.progressBar .seg:last-of-type {
  border-right: 0;
}
.progressBar:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  background: rgb(30, 87, 153);
  background: -moz-linear-gradient(left, rgba(30, 87, 153, 1) 0%, rgba(41, 137, 216, 1) 27%, rgba(30, 87, 153, 1) 74%, rgba(125, 185, 232, 1) 100%);
  background: -webkit-linear-gradient(left, rgba(30, 87, 153, 1) 0%, rgba(41, 137, 216, 1) 27%, rgba(30, 87, 153, 1) 74%, rgba(125, 185, 232, 1) 100%);
  background: linear-gradient(to right, rgba(30, 87, 153, 1) 0%, rgba(41, 137, 216, 1) 27%, rgba(30, 87, 153, 1) 74%, rgba(125, 185, 232, 1) 100%);
  filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#1e5799', endColorstr='#7db9e8', GradientType=1);
}
.progressBar .progradient {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  background-color: #fff;
}
.progressBar.large {
  border-radius: 40px;
}
.progressBar.large .seg {
  min-height: 40px;
  flex: 1;
}
.progressBar.large .text {
  -webkit-flex-grow: 1;
  flex-grow: 1;
  -webkit-align-self: center;
  align-self: center;
  font-size: 18px;
  text-align: center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="max-width: 160px">
  <div class="progressBar small">
    <div class="seg fill"></div>
    <div class="seg fill"></div>
    <div class="seg"></div>
    <div class="seg"></div>
    <div class="seg"></div>
    <div class="progradient"></div>
  </div>
</div>

<div class="progressBar large">
  <div class="seg fill"></div>
  <div class="seg fill"></div>
  <div class="seg fill"></div>
  <div class="seg"></div>
  <div class="seg"></div>
  <div class="progradient"></div>
</div>

<div class="progressBar large">
  <div class="seg fill flex">
    <div class="text">Test</div>
  </div>
  <div class="seg fill flex">
    <div class="text">Test</div>
  </div>
  <div class="seg fill flex">
    <div class="text">Test</div>
  </div>
  <div class="seg"></div>
  <div class="seg"></div>
  <div class="progradient"></div>
</div>