ngAnimate breaks when trying to animate ng-repeat calls nested inside ng-repeat-start/-end calls

[mreininger]

See example: http://plnkr.co/edit/dtdINblvJ0oWMJIFaq31

Nesting ng-repeat blocks inside another ng-repeat-start/-end block breaks animations for the nested elements, when the nesting occurs in a block not directly tagged with ng-repeat-start.

As far as I can see this happens because the enter method is called for all elements contained in the ng-repeat-start/-end, setting the NG_ANIMATE_STATE to disabled=true, but the cleanup method is only called for the element that has the ng-repeat-start directly and not for any further elements down the line. So for elements below ng-repeat-start element.removeData(NG_ANIMATE_STATE); is never called and they stay disabled forever.

[matsko]

Looking into it.

[matsko]

So the behaviour is expected with 1.2. However, with 1.3 we may be able to change this. I'll need to discuss this with @IgorMinar to see if that's possible.

[brianephraim]

My work is impacted by this limitation.

I noticed this is noted in the animate.js comments so maybe the limitation is intended as a feature or safeguard.

My use case:

I want a route change to initiate a fullscreen sliding transition as quickly as possible to achieve a snappy user experience. So I initiate the transition for the shell of the incoming screen and simultaneously make an ajax call for the server data to be displayed. When the ajax call gets a response, I make that response a $scope property, and I fade in the main content section of that new screen. The initiation of this fade effect will likely occur in the middle of the fullscreen sliding transition. If ng-animate nesting worked, this would look smooth. But due to the limitation, the fade effect fails, causing the main content section to jank into 100% opacity in the middle of an otherwise smooth sliding transition.

Here's an approximation of the view I'm working with to help illustrate:

<div ng-view class="full-page-slide-animation" ng-controller="ctrl-wrapping-ajax">
    <header class="presentational-styles">Hi</header>
    <section class="fade-in-animation" ng-show="ajaxData">
        <p>{{ajaxData.prop1}}</p>
        <p>{{ajaxData.prop2}}</p>
        <p>{{ajaxData.prop3}}</p>
    </section
    <footer>bye</footer>
</div>

Unless this is remedied, I will achieve this effect with either directives, or ng-class + css. But doing it all with ng-animate would be preferable for the sake of consistency, flexibility, and features.

[antwan]

If that can help, I was about to fill a bug for this, so here is another testcase.

ng-repeat inside ng-repeat works
ng-repeat inside ng-repeat-start doesn't.

Tested with latest browsers (ff29, chrome34, ie11)
Reproducible with angular/angular-animate 1.2.16 & 1.3.0-beta.9

[matsko]

@mreininger @defualt @Antwan86 this feature will require a special attribute. There's a PR that provides this. Please comment on there to provide feedback:

#7946

[matsko]

This now works by placing ng-animate-children on a container element.

http://plnkr.co/edit/YV6wTxRTUqHNPN3xPzy2?p=preview