Анимируйте новые элементы в AngularJS

Я использую AngularJS и пытаюсь анимировать ввод новых элементов в свой массив:

<div ng-repeat="obj in objects">
  {{ obj.name }}
</div>

Но есть проблема с тем, как я обновляю свой массив: я делаю это с http.get и я не добавляю какой-то новый элемент в свой объект, а полностью обновляю его, как здесь:

$http.get('/some/url').success(function(objects){
  $scope.objects = objects;
});

Так есть ли способ справиться с анимацией в этом случае или мне нужно изменить способ обновления моего массива?


javascript angularjs ng-animate
person Phantaminuum    schedule 11.03.2014    source источник
comment
Я попытался зациклить результаты и поместить их в $scope.objects, но это было слишком быстро, и я не видел, чтобы анимация происходила .... если бы была возможность немного отложить внутри цикла for, тогда я действительно мог бы сказать если это вообще происходит :D   -  person Ricky Levi    schedule 30.03.2015

Ответы (2)


arrow_upward
2
arrow_downward

Если вы используете ngAnimate, вы сможете без проблем анимировать класс ng-enter. Проверьте этот плунжер...

http://plnkr.co/edit/oCLzLHbDLtNT8G8rKFJS?p=preview

Я устанавливаю 2-секундную задержку, а затем полностью заменяю массив. Анимации по-прежнему работают, как и ожидалось. Используя Angular версии 1.2+, просто включите модуль ngAnimate в основной модуль приложения.

var app = angular.module('app', ['ngAnimate']);

Дайте вашим элементам ng-repeat класс css, например «анимировать». И прикрепите css-анимации, когда классы ng-enter, ng-leave добавляются angular

.animate.ng-enter, 
.animate.ng-leave {
...
}
.animate.ng-enter.ng-enter-active, 
.animate.ng-leave{
 ...
}
person Charlie Martin    schedule 11.03.2014
comment
Вот другой рабочий пример того, что Чарли Мартин опубликовал выше. jsfiddle.net/hyga3rf1 - person Jon Watson; 28.06.2016

arrow_upward
0
arrow_downward

Это старый вопрос, но я наткнулся на него и подумал, что вложу свои 0,02 доллара.

Вместо того, чтобы заменять объект новым списком только для того, чтобы получить несколько новых элементов, вместо этого поместите только новые элементы в конец массива, а затем отобразите массив в ваш ng-repeat в обратном порядке. Таким образом, когда появляются новые элементы, они появляются по одному, что позволяет анимировать их.

$http.get('/some/url')
.success(function(objects){
  for(o in objects){
    if(!$scope.objects[o]){
      $scope.objects.push(objects[o]);
    }
  }
});
person sterling baldwin    schedule 26.04.2016