Flexbox进度条动画 - 宽度不正确 [英] Flexbox Progress Bar Animation - Incorrect Width

查看：86
本文介绍了Flexbox进度条动画 - 宽度不正确的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我试图用动画创建一个进度条。它可以工作，如果我没有内部文本，但只要我添加内部文本的宽度计算是由于某种原因不同。我已经尝试使用不同的 width（）函数，而且我试过把每个段加起来，但是每次出于某种原因，文本都会抛出宽度。



这就是我的 - JSFiddle


$ b

/ **进度栏动画** / function animate_progress_bar（）{if（！$（ '.progressBar'）。length）{return false; （$。（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 +'％'}， （）;}）;} animate_progress_bar（）;

flex {display：-webkit-flex; display：flex;}。flex> * {-ms-flex：0 1 auto;}。progressBar {display：-webkit-flex;显示：flex; border：1px solid＃000; border-radius：20px;溢出：隐藏;位置：相对; margin-bottom：40px;} progressBar .seg {-webkit-flex-grow：1; flex-grow：1; min-height：20px; border-right：1px solid＃000; progressBar .seg：last-of-type {border-right：0;} progressBar：before {content：'';位置：绝对;顶部：0;左：0; z-index：1;宽度：100％;身高：100％背景：rgb（30，87，153）;背景：-moz-linear-gradient（左，rgba（30,87,153,1）0％，rgba（41,137,216,1）27％，rgba（30,87,153,1）74％ rgba（125,185,232,1）100％）;背景：-webkit-线性梯度（左，rgba（30,87,153,1）0％，rgba（41,137,216,1）27％，rgba（30,87,153,1）74％， rgba（125,185,232,1）100％）;背景：线性梯度（右边），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;顶部：0;正确：0; z-index：1;宽度：100％;身高：100％ 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>测试< / div> < / DIV> < div class =seg fill flex> < div class =text>测试< / div> < / DIV> < div class =seg fill flex> < div class =text>测试< / div> < / DIV> < div class =seg>< / div> < div class =seg>< / div> < div class =progradient>< / div>< / div>

解决方案

您只需将 flex：1; 添加到您的细分类中即可。


$ blockquote
flex：< positive-number> ：



相当于flex：< positive-number> 1 0 。使flex项目具有灵活性并将flex基础设置为零，
导致接收flex容器中
可用空间的指定比例的项目。如果弹性容器
中的所有项目都使用此模式，则其大小将与指定的
弹性系数成比例。


资料来源： W3C



类别变更： 

  .progressBar.large .seg {
 min-height：40px; 
 flex：1; / *增加的财产* / 
}





代码段：
$ b

/ ** Progress Bar Animation ** / function animate_progress_bar（）{if（！$（'。progressBar'）。length）{return false; （$。（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 +'％'}， （）;}）;} animate_progress_bar（）;

flex {display：-webkit-flex; display：flex;}。flex> * {-ms-flex：0 1 auto;}。progressBar {display：-webkit-flex;显示：flex; border：1px solid＃000; border-radius：20px;溢出：隐藏;位置：相对; margin-bottom：40px;} progressBar .seg {-webkit-flex-grow：1; flex-grow：1; min-height：20px; border-right：1px solid＃000; progressBar .seg：last-of-type {border-right：0;} progressBar：before {content：'';位置：绝对;顶部：0;左：0; z-index：1;宽度：100％;身高：100％背景：rgb（30，87，153）;背景：-moz-linear-gradient（左，rgba（30,87,153,1）0％，rgba（41,137,216,1）27％，rgba（30,87,153,1）74％ rgba（125,185,232,1）100％）;背景：-webkit-线性梯度（左，rgba（30,87,153,1）0％，rgba（41,137,216,1）27％，rgba（30,87,153,1）74％， rgba（125,185,232,1）100％）;背景：线性梯度（右边），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;顶部：0;正确：0; z-index：1;宽度：100％;身高：100％ 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>测试< / div> < / DIV> < div class =seg fill flex> < div class =text>测试< / div> < / DIV> < div class =seg fill flex> < div class =text>测试< / div> < / DIV> < div class =seg>< / div> < div class =seg>< / div> < div class =progradient>< / div>< / div>

I'm trying to create a progress bar with an animation. It works if I don't have inner text but as soon as I add the inner text the width calculations are different for some reason. I've tried working with the different width() functions and I've tried adding up each segment but every time the text throws off the width for some reason.

Here's what I have - 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>

解决方案

You just need to add flex: 1; to your segment class.

flex: <positive-number>:

Equivalent to flex: <positive-number> 1 0. Makes the flex item flexible and sets the flex basis to zero, resulting in an item that receives the specified proportion of the free space in the flex container. If all items in the flex container use this pattern, their sizes will be proportional to the specified flex factor.

Source: W3C

Class changed:

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

Code Snippet:

/** 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>

这篇关于Flexbox进度条动画 - 宽度不正确的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆