Javascript 进度条在AngularJS中向后移动

我使用AngularJS构建了一个小应用程序

有一个使用ng repeat的数据表。数据表不断变化，通过web套接字实时更新、添加和删除行

每一行都有一个进度条，它是一个简单的div，具有由数据属性设置的css宽度百分比

以下是我的html中的一个片段：

<tr ng-repeat="job in jobs | filter:query | orderBy:sort.column:sort.reverseorder track by $index">
    <td>
        {{job.id}}
    </td>
    <td class="progress">
        <div ng-if="job.status=='running'" class="progress-outer">
            <div class="progress-inner" ng-style="{width: job.progress+'%'}">

            </div>
    </td>
</tr>

在我将CSS转换添加到进度条以使其更平滑之前，这一切都很正常。进度条现在可以做一些奇怪的事情，比如在添加或删除行时向后退。我知道这是为什么，但不知道如何解决它

这是过渡CSS：

.progress-inner {
  -webkit-transition: width 1s ease-in-out;
  -moz-transition: width 1s ease-in-out;
  -o-transition: width 1s ease-in-out;
  transition: width 1s ease-in-out;
}

假设该表以4行开始-让我们称它们为A、B、C和D。B行通过web套接字的信号删除。然后，位于位置3和4的行C和D向上移动，分别填充位置2和3。第2行中的进度条似乎从进度值B转换为C。第3行中的进度条也是如此-它从进度值C动画化为进度值D

我期望Angular从物理上删除第二个表行，但实际上它似乎重新映射了导致转换发生的数据，然后删除了表的最后一行

如果在现有行之前添加一行，也会发生同样的情况

---

有人知道如何解决这个问题吗？

我自己设法解决了这个问题

原来是这一行:

<tr ng-repeat="job in jobs | filter:query | orderBy:sort.column:sort.reverseorder track by $index">

---

我不知道为什么我添加了track by$index，但是删除了部分修复了问题，并且我没有注意到任何负面影响。

在解决代码问题时，一些代码可能会有所帮助：没有问题-我认为它不会增加太多，但是我会用一些片段来更新这篇文章。@naxtek我们需要你在以下时间添加的代码：在我添加CSS动画之前，它工作正常。根据你的描述，我认为你的CSS文件值得一看，抱歉，我是说转换。只需在元素内部进行标准的1秒转换。

<tr ng-repeat="job in jobs | filter:query | orderBy:sort.column:sort.reverseorder track by $index">