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

ngRepeat动画不适用于所有元素

1 个答案: