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>

@RichardTorcato Just switching "class" to "ng-class"? That shouldn't help as it is unrelated to "ng-repeat". — Pipo, Aug 13 '14 at 13:46
@PSL The inner ng-repeat isn't animated. You can check it here http://plnkr.co/edit/506fyYc7fgsvEcXmlgpd?p=preview, if you use different animations for the inner and outer ng-repeat. — Pipo, Aug 13 '14 at 13:47
@Pipo "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 — PSL, Aug 13 '14 at 13:48
http://www.yearofmoo.com/2013/08/remastered-animation-in-angularjs-1-2.html Here is official https://docs.angularjs.org/api/ng/directive/ngRepeat#usage — PSL, Aug 13 '14 at 13:49
@PSL 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. — Pipo, Aug 13 '14 at 13:57
@Pipo no my bad.. I dint read it properly.... I saw your animation css in your plunker dint have much... Hence i thought so... — PSL, Aug 13 '14 at 14:04
Try this.. http://plnkr.co/edit/k6JdVy?p=preview Need to add `ng-animate-children` on the parent — PSL, Aug 13 '14 at 14:29

PSL · Accepted Answer · 2014-08-14T01:43:48.437

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.

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. — Pipo, Aug 14 '14 at 06:50

Can't trigger animation on nested ngRepeat

1 Answers1

Linked