Анимация ng-repeat ng-move в angular 1.2.x

У меня возникли трудности с получением анимации css для движения в угловом списке ng-repeat. У меня есть планкер здесь: http://plnkr.co/edit/KIcTiJ?p=preview

Как видите, анимация ng-enter обрабатывается при первой загрузке плункера. Однако я не могу найти способ запустить анимацию для движения списка. В примере при нажатии на стрелки обрабатывается ng-hide, и я ожидаю, что будет запущена анимация ng-move, но мне интересно, не понимаю ли я, как запускается анимация ng-repeat move.

В любом случае, может ли кто-нибудь предложить мне лучший способ применить анимацию angular 1.2 к этому списку, когда я нажимаю стрелки влево и вправо в этом примере? Я пробовал альтернативные методы создания ng-repeat (я мог бы использовать угловой фильтр вместо ng-hide), и я пробовал разные переходы css, но, похоже, ничего не работает. Любой совет здесь будет принят с благодарностью о том, как прогрессировать.

Извините, если этот вопрос кажется повторением, но я просмотрел похожие вопросы в stackoverflow, но единственные другие ответы, которые я смог найти, касались более старой структуры анимации angular или предложенной пользовательской анимации javascript, которую я надеялся избежать.


angularjs ng-animate
person infomofo    schedule 02.02.2014    source источник

Ответы (1)


arrow_upward
1
arrow_downward

ng-repeat анимация работает, если коллекция изменилась. Вы можете использовать $filter, чтобы отразить ваши изменения в коллекции.

<li ng-class="{'text-danger': item == f}" ng-repeat="item in items| filter: filteredData" class="animate-repeat">
  <span>{{item}}</span>
</li>

Здесь filteredData — это функция контроллера, которая выполняет логику вашего фильтра. (вы также можете написать собственный фильтр)

  $scope.filteredData = function(item) {
    return (Math.abs($scope.f - item) < 2);
  }

Проверьте обновленный Plunker, как анимация работает.

person Tasnim Reza    schedule 02.02.2014
comment
Ах, хорошо, используя $filter вместо ng-hide для изменения отображаемых элементов, теперь я получаю анимацию для отображения: plnkr.co/edit/KIcTiJ?p=preview. Спасибо! - person infomofo; 02.02.2014