Can't trigger animation on nested ngRepeat

All we need is an easy explanation of the problem, so here it is.

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>

How to solve :

I know you bored from this bug, So we are here to help you! Take a deep breath and look at the explanation of your problem. We have many solutions to this problem, But we recommend you to use the first method because it is tested & true method that will 100% work for you.

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

Note: Use and implement method 1 because this method fully tested our system.
Thank you 🙂

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply