how to use animation with ng-repeat in angularjs

Question

I have a list which I iterate over by using ng-repeat: and the user can interact with thte list items by using up-arrow and down-arrow icons and on click of them i simply change the order of the element in the "list" this is what angular suggests change the model and the changes automatically reflect in the view.

<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>

Logic in moveUp:-

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

the above code works completely fine and similar is the logic for shifting the item down. But the problem that i want to resolve is how do i put animation? I know angular takes care of binding view and model on its own but is there any way to put in animation as the view is updated on pressing up an down arrow icons?

Rémi Becheras · Accepted Answer · 2014-11-17 17:59:26Z

57

Following on from Marcel's comment: in AngularJS 1.2 you don't need to use the ng-animate directive. Instead:

Includeangular-animate[-min].js.
Make your module depend on ngAnimate.
Define your transitions in CSS using classes like .ng-enter and .ng-enter-active.
Use ng-repeat as you normally would.

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;
}

Demo in (someone else's) Plunker.

See the docs for $animate for details on the progression through the various CSS classes.

edited Nov 17, 2014 at 17:59

Rémi Becheras

15.3k14 gold badges55 silver badges85 bronze badges

answered Aug 28, 2014 at 6:39

z0r

8,6805 gold badges67 silver badges87 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

z0r Over a year ago

It's also a good idea to restrict animation to just the things you're interested in - otherwise you can end up with elements hanging around for a few extra seconds if you haven't defined the appropriate CSS classes. See $animateProvider.classNameFilter

vinesh Over a year ago

I found this plnkr.co/edit/oCLzLHbDLtNT8G8rKFJS?p=preview more helpful example which gives idea of animation when element is inserted at any index.

T J · Accepted Answer · 2016-05-15 18:13:15Z

6

Check this link http://www.nganimate.org/

You need to declare the ng-animate attribute to an element that have another directive that changes the DOM
```
div ng-repeat="item in itens" ng-animate="{enter: 'animate-enter', leave: 'animate-leave'}"
```

You need to add css transitions or animation.

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

You can check plnkr example here: http://plnkr.co/edit/VfWsyg9d7xROoiW9HHRM

edited May 15, 2016 at 18:13

T J

43.2k13 gold badges87 silver badges142 bronze badges

answered Dec 14, 2013 at 9:34

Rokas

1,7222 gold badges18 silver badges36 bronze badges

1 Comment

Marcel Over a year ago

I think the ng-animate directive is deprecated in AngularJS 1.2. For a current ng-repeat example check out this link yearofmoo.com/2013/08/… Most of CSS from nganimate.org though is still a good way to get started.

clopez · Accepted Answer · 2014-11-18 14:30:19Z

4

Complementing the last answer, there is the ng-move class for animations when order is changed:

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

Last documentation here.

answered Nov 18, 2014 at 14:30

clopez

4,3823 gold badges30 silver badges43 bronze badges

Comments

Jaison James · Accepted Answer · 2016-12-27 11:48:06Z

2

If you don’t wish to use ‘ngAnimate’ module because of reduce the plugins count, you can archive the simple transition effect by using ng-init and custom directives.

<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);
    };
});

In you controller

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

answered Dec 27, 2016 at 11:48

Jaison James

4,5624 gold badges44 silver badges57 bronze badges

Collectives™ on Stack Overflow

how to use animation with ng-repeat in angularjs

4 Answers 4

2 Comments

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related