Как использовать анимацию с ng-repeat в angularjs

У меня есть список, который я перебираю с помощью ng-repeat: и пользователь может взаимодействовать с элементами списка, используя стрелки со стрелкой вверх и стрелкой вниз, и при нажатии на них я просто изменяю порядок элемента в "список" - это то, что angular предлагает изменить модель, и изменения автоматически отражаются в представлении.

<div ng-repeat="item in list">
{{item.name}} 
<div class="icon-up-arrow" ng-click="moveUp($index);"></div> 
<div class="icon-down-arrow" ng-click="moveDown($index);"></div>
</div>

Логика в moveUp: -

$scope.moveUp= function(position){
 var temp=list[position-1];
 list[position-1]=list[position];
 list[position=temp];
};

приведенный выше код работает полностью точно, и аналогичная логика сдвигает элемент вниз. Но проблема, которую я хочу решить, - это как добавить анимацию? Я знаю, что angular сам по себе заботится о привязке вида и модели, но есть ли способ добавить анимацию по мере обновления представления при нажатии на значки стрелок вниз?

Ответы

Ответ 1

Далее из комментария Марселя: в AngularJS 1.2 вам не нужно использовать директиву ng-animate. Вместо этого:

Включить angular-animate[-min].js.
Сделайте свой модуль зависимым от ngAnimate.
Определите свои переходы в CSS с помощью классов, таких как .ng-enter и .ng-enter-active.
Используйте ng-repeat, как обычно.

HTML:

<div ng-app="foo">
    <!-- Set up controllers etc, and then: -->
    <ul>
        <li ng-repeat="item in items">{{item}}</li>
    </ul>

JavaScript:

angular.module('foo', ['ngAnimate']);
// controllers not shown

CSS

li {
    opacity: 1;
}
li.ng-enter {
    -webkit-transition: 1s;
    transition: 1s;
    opacity: 0;
}
li.ng-enter-active {
    opacity: 1;
}

Демо в (чужой) Plunker.

Подробнее о развитии через классы CSS см. в документах для $animate.

Ответ 2

Отметьте эту ссылку http://www.nganimate.org/

Вам нужно объявить атрибут ng-animate для элемента, у которого есть другая директива, которая изменяет DOM
```
div ng-repeat="item in itens" ng-animate="{enter: 'animate-enter', leave: 'animate-leave'}"
```

Вам нужно добавить css-переходы или анимацию.

.animate-enter {
   -webkit-transition: 1s linear all; /* Chrome */
   transition: 1s linear all;
   opacity: 0;
}
.animate-enter.animate-enter-active {
   opacity: 1;
}

Здесь вы можете проверить пример plnkr: http://plnkr.co/edit/VfWsyg9d7xROoiW9HHRM

Ответ 3

В дополнение к последнему ответу, при изменении порядка существует класс ng-move для анимаций:

li {
    opacity: 1;
}
li.ng-move {
    -webkit-transition: 1s;
    transition: 1s;
    opacity: 0;
}
li.ng-move-active {
    opacity: 1;
}

Последняя документация здесь.

Ответ 4

Если вы не хотите использовать модуль "ngAnimate" из-за уменьшения количества подключаемых модулей, вы можете архивировать простой эффект перехода с помощью ng-init и настраиваемых директив.

<li ng-repeat="item in items" class="item" item-init>{{item.name}}</li>

.item{
    opacity:0;

   -webkit-transition: all linear 300ms;
   transition: all linear 300ms;
}
.item.visible{
    opacity:1;
}


myApp.directive('itemInit', function ($compile) {
    return function (scope, element, attrs) {
        scope.initItem(element);
    };
});

В контроллере

$scope.initItem = function(el){
    $timeout(function(){
        angular.element(el).addClass('visible');
    },0);
}