通过迭代应用的宽度更改动画

Question

我正在为游戏内DPS仪表创建皮肤，并且我有一个迭代来收集每个战斗机的数据

for (var i = 0; i < names.length; i++) {
  var combatant = combatants[names[i]];

根据战斗人员的DPS，我使用.css（）更改"进度栏"的宽度，例如Div。

row.find('.bar').css('width', ((parseFloat(combatant.encdps) / maxdps) * 100) + '%');

这很好，但是我想对酒吧宽度的增长/收缩进行动画。如果我使用Animate（）而不是css（），则栏正在不断动画（迭代），并且我只想对宽度进行动画更改。

我尝试使用CSS过渡"过渡：宽度2S"；但这似乎没有效果。

编辑：更改inline style =" width：32.45％"时，浏览器检查员我可以看到过渡，但是，如果宽度被迭代替换为迭代，则过渡不起作用。

<</p>

Answer 1

当您使用transition: width 2s;时，动画将需要2秒钟才能结束，如果宽度应将宽度从89％移至90％，这似乎无能为力。尝试使期间变短，例如

transition: width .2s linear;

Answer 2

我认为这个示例会帮助您。

var people = [
  {
    name: "Batman",
    score: "100"
  },
  {
    name: "Superman",
    score: "50"
  }];
  
  for(var i=0; i < people.length; i++){
    
    var row = $("#template").clone();
    row.find(".name").text(people[i].name);
    row.find(".score").text(people[i].score);
    
    row.find(".bar").animate({
        width: people[i].score + "%",
    }, 600);
        
    var container = $("#container");
    
    row.appendTo(container);    
    
  }
  
  $("#template").replaceWith(container);

.bar {
  background: #403a3e; /* fallback for old browsers */
  background: -webkit-linear-gradient(to right, #403a3e, #be5869); /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to right, #403a3e, #be5869); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  width: 100%;
  height: 20px;
  border-radius: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="template">
  <div class="name"></div>
  <div class="score"></div>
  <div class="bar" style="width: 0%"></div>
</div>
<div id="container">
  
</div>

update

===================

基于提供的JSFIDDLE，width属性似乎不是动画的，因为它直接使用先前定义的width附加到DOM。

解决方案是使用 jQuery in Instoy animate函数如下，然后删除CSS width动画。

row.find(".bar").animate({
   width: people[i].score + "%",
}, 600);

您可以看到提供的示例如预期的。这是您在JSFIDDLE上添加的逻辑的复制品。