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

Posted 2023-03-05

【中文标题】Flexbox 进度条动画 - 宽度不正确

【英文标题】：Flexbox Progress Bar Animation - Incorrect Width

【发布时间】：2017-02-22 19:37:14

【问题描述】：

我正在尝试创建一个带有动画的进度条。如果我没有内部文本，它会起作用，但是一旦我添加内部文本，宽度计算就会因某种原因而不同。我尝试过使用不同的 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>

【参考方案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>