ngRepeat 动画不适用于所有元素

Question

所以我想用角度构建一个简单的列表，其中一些项目通过动画它们的绝对顶部位置被放置到列表的顶部。

所以我建立了一个简单的视图：

<ul>
  <li ng-repeat="person in list | orderBy: sort"
  ng-style="{top: $index * 20 + 'px'}">
    <span>{{person.name}}</span>
    <input type="checkbox" ng-model="person.checked"/>
  </li>
</ul>

其中list是一个对象数组，sort是一个简单的排序函数：

$scope.sort = function(person) {
  var comparisonString = '';
  if(person.checked) {
    comparisonString += '0';
  }
  comparisonString += person.name;
  return comparisonString;
};

并给它一些简单的样式：

ul {
  position:absolute;
  width:100%;
}
ul li {
  position:absolute;
  transition: top 1s linear;
}

但是，如果我单击其中一个复选框，则元素会立即移动到顶部，而没有 1s 动画。如果我取消选中一个元素，那么它下面的元素会立即占据上面的空间，再次，没有动画。这可能与我通过 ngStyle 指令定义样式这一事实有关，但是如果没有 ngStyle，我无法找到解决此问题的方法。

Plunker 就是这种情况的一个例子。

如果有人可以帮助我，我将非常感激！

Answer 1

这里有一个我可以读到的你正在尝试做的例子：

function rearrange(){
            $('.item').each(function(idx, el){
                var $el = $(el);                
                var newTop = idx * $config.OFFSET_Y;

                if (newTop != parseInt($el.css('top'))) {
                    $el.css({
                        'top': newTop
                    })
                    .one('webkitTransitionEnd', function (evt){
                        $(evt.target).removeClass('moving');
                    })
                    .addClass('moving');    
                }

            });

在此示例中，移动是在后端范围内自动进行的。我认为您可以将它们分开并用于列表中的每个项目。

来源：http://codepen.io/daleyjem/pen/xbZYpY