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>

- Howdy_McGee

Answer 1

你只需要在你的段落类中添加 flex: 1;。

---

flex: <positive-number>:

相当于 flex: <positive-number> 1 0。使弹性项目具有弹性并将基础弹性设置为零，从而使该项目在弹性容器中接收指定比例的空闲空间。如果弹性容器中的所有项目都使用此模式，则它们的大小将与指定的弹性因子成比例。

来源：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>

- Ricky