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过渡“transition：width 2s;”但这似乎没有效果。

编辑：在浏览器检查器中更改内联样式=“width：32.45％”时，我可以看到转换，但是如果宽度被for迭代替换，则转换不起作用。

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>

<强>更新

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

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

解决方法是使用jQuery内置animate功能，如下所示，删除css width动画。

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

您可以看到提供的示例按预期工作。它是你在jsfiddle上添加的逻辑的复制品。

动画由迭代

2 个答案: