Enter/leave animation not working for for first item in ng-repeat

[cvn]

If an element has both ng-repeat and a directive that uses templateUrl <div my-dir ng-repeat="...">, the enter animation doesn't work for the first item, even if the template is in $templateCache.

Demo

If you don't pre-warm the $templateCache, the leave animation doesn't work either. You can comment out the run block in the demo to see this.

If the directive is on a child element, the problem goes away, and all animations work. And if fetching the template is fast enough, enter and leave animations both work from a cold cache.

<div ng-repeat="x in y"> <div my-dir></div> </div>

I tested this in Angular 1.5.8 and 1.6.0, with Chrome 54, Safari 10, and Firefox 50.

@gkalpak suggested I make this ticket in #12612.

[gkalpak]

This is loosely-related to the lazy compilation of transcluded elements (or rather the fact that ngAnimate does not handle that correctly). I have a fix for it (see demo), which I am having a hard time writing a test for 😃

[cvn]

@gkalpak, I tested the demo, and with a warm cache, the animations are working. Great! But with a cold cache, the enter and leave animations still aren't working.

[gkalpak]

@cvn, that is a different issue and is unavoidable I am afraid (note that the same happens if you put the directive on a child element). The problem is that the structural directive is (e.g. ngRepeat) is animating in a plain DOM element (e.g. <my-dir-a></my-dir-a>). It is not its job to know what is going on on that element (e.g. that it matches a myDirA directive or that myDirA has loads its template asynchronously). It just animates the element in.

Previously, even if the template was in the cache (so it was loaded by the time the animation was about to start), $animate would fail to properly perform the animation due to a bug. With #15514 the animation is correctly executed, but the developer still has to ensure that the template will be available by the time the animation starts (either by inlining it with template or by pre-caching it).

[cvn]

For me, when the directive is on a child element, the enter and leave animations both work from a cold cache. The enter animation sometimes fails if it takes too long to fetch the template, but it works when the latency is low. Unless I'm misunderstanding what you're saying.

[gkalpak]

The enter animation sometimes fails if it takes too long to fetch the template, but it works when the latency is low.

Yes, this pretty much describes the situation. What I am saying is that we can't (or won't 😛) change/"fix" that. This is expected bahavior. If the template is in the $templateCache, you can be certain it will be there in time and will be visible for the animation (this is what my PR fixes). If the template is fetched from a server, it may or may not make it in time to be present when the animation happens.

[cvn]

Cool. I'm happy with how it works now. Thanks for taking the time.