Can't trigger animation on nested ngRepeat

Question

I can't figure out how to trigger animations on a nested ngRepeat with Angular.

The CSS class ".test" is animated. When using ".test" on the inner ngRepeat it doesn't work (Plunker):

<div ng-repeat="section in sections">
  <div ng-repeat="item in section.items" class="test">
    <h2>{{item.title}}</h2>
  </div>
</div>

When using ".test" on the outer ngRepeat it does work (Plunker):

<div ng-repeat="section in sections">
  <div ng-repeat="item in section.items" class="test">
    <h2>{{item.title}}</h2>
  </div>
</div>

Cockerel

have you tried changing class to ng-class? – Spectroradiometer

@RichardTorcato Just switching "class" to "ng-class"? That shouldn't help as it is unrelated to "ng-repeat". – Cockerel

@PSL The inner ng-repeat isn't animated. You can check it here plnkr.co/edit/506fyYc7fgsvEcXmlgpd?p=preview, if you use different animations for the inner and outer ng-repeat. – Cockerel

@Cockerel "Animation" is a broad term animation can be done in many ways.. WHat are you looking for.. ALso there are numerous example online for angular animations – Brat

yearofmoo.com/2013/08/… Here is official docs.angularjs.org/api/ng/directive/ngRepeat#usage – Brat

@Brat Sorry, if this isn't clear. I want to animate nested ng-repeats. It doesn't matter how the animation looks like, but I don't want to animate the outmost ng-repeat! E.g. so I can use staggering animations for some inner elements, not just the outer elements. I know "how" to animate ng-repeat - but it just don't work if it is nested. – Cockerel

@Cockerel no my bad.. I dint read it properly.... I saw your animation css in your plunker dint have much... Hence i thought so... – Brat

Try this.. plnkr.co/edit/k6JdVy?p=preview Need to add ng-animate-children on the parent – Brat

Answer 1

You probably need to add ngAnimateChildren attribute on the parent container, and update the css as well.

Try:-

<div ng-repeat="section in sections" ng-animate-children>
  <div ng-repeat="item in section.items" class="test">
    <h2>{{item.title}}</h2>
  </div>
</div>

and

.test.ng-move,
.test.ng-enter,
.test.ng-leave {
  -webkit-transition: all 0.3s  ease-out;
    transition: all 0.3s  ease-out;
}

.test.ng-leave.ng-leave-active,
.test.ng-move,
.test.ng-enter {
   opacity:0;
   -webkit-transform: translate(-20px, 0);
    transform: translate(-20px, 0);
}

.test.ng-leave,
.test.ng-move.ng-move-active,
.test.ng-enter.ng-enter-active {
 opacity:1;
   -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
}

Plnkr

Found this from the doc

Keep in mind that, by default, if an animation is running, any child elements cannot be animated until the parent element's animation has completed. This blocking feature can be overridden by placing the ng-animate-children attribute on a parent container tag.

Even though there is no animation on the parent repeat, it seems like ng-animate just ignores any further animation on its children.

Brat

Wow, never heard of ng-animate-children before. I've never seen this in the docs before. That absolutely solves the problem. Thank you very much. – Cockerel