Angular.js: ngAnimate with ngRepeat in directive using templateUrl issue

[xavadu]

Hello,

Sorry but i can't reproduce this error on plunkr yet.

The issue is that ngRepeat animation fail for the first time when is applied on a directive that use a templateUrl, it start to happen in 1.5.0 upgrade, on 1.4.1 it was working fine.

The css animation never get the state of _.ng-enter-active_ and it keep on the _.ng-enter_ state.

some PoC:

.animate-repeat.ng-enter,
.animate-repeat.ng-move {
    transition: 0.5s ease-out all;  
    animation-fill-mode: both;
}

.animate-repeat.ng-enter {
  background-color: red;
  transform: translate3d(0, -5%, 0);
}

.animate-repeat.ng-enter.ng-enter-active {
  background-color: blue;
  transform: none;
}

.animate-repeat.ng-enter-stagger {
  transition-delay: 0.1s;
  animation-delay: 0.1s;
  transition-duration: 0s;
}

<my-directive ng-repeat="colors in sky" class="animate-repeat"><my-directive>

if _sky_ is equal to null, not defined or empty array, etc.. it happen, if _sky_ is previously populate it doesn't happen. On our case _sky_ is populate by an $http request after some user interaction in a form.

The situation is that myDirective keep with background red and never get the background blue. Later a re-submit, it works, because _sky_ had data previously and wasn't null or empty.

The interesting is that it occur only if my-directive use a templateUrl, if the template is inline all works fine.

Is quite complicate to explain, let me know if you need a better description of some part.

It become really annoying when instead a a background color, you are going from opacity 0 to opacity 1. So, the ngRepeat list don't appear.

[dcherman]

In all likelihood, this is a duplicate of https://github.com/angular/angular.js/issues/14074

[Narretz]

It does sound a bit different than the other issue, so a plnkr would really help. Especially the part where it works the second time.

[dcherman]

@Narretz Yup, would definitely help. The reason it might work (and be the same issue) is that once transclusion occurs, the original async directive is replaced with a derived sync one, so the second time the ngRepeat unrolls after the $templateRequest completes, it wouldn't exhibit the bug.

[xavadu]

Hello,

I can re create the situation in a plunkr, for a practice propuse i defined the ng-repeat animation ng-enter class with opacity 0.3, so we can appreciate that the element was inserted in the DOM but the animation state doesn't change to ng-enter.ng-enter-active which define the opacity to 1 (only for the first populate of the objects array, in the example called $scope.food, later it works fine).

You can notice that if the template is inline it works as expected but if the template is external few issues are happening:

On first click 'load items' not all the items reach the ng-enter.ng-enter-active state and they keep with 0.3 of opacity,

On a second click in 'load items' the way that the items disappear is weird.. the new items are added to the DOM and after the previously items are removed (i thought that it is related to the first problem)

If the 'load items' button is clicked for a third time, both directives are working fine as expected.

http://plnkr.co/edit/1lh5mN83ipAlKek4vUqz?p=preview

Any ideas about the cause of the issue? Remember that it start to happen in 1.5.0 upgrade, on 1.4.1 it was working fine

[poacher2k]

We're also experiencing this exact issue on a project using angular and angular-animate version 1.5.3.

[Narretz]

Sorry for the late response. This also looks like a problem with lazy transclusion, introduced in 1.5.0-beta.0. We'll investigate what we can do about this.

[lishner]

Having the same issue here, it seems that the classes "ng-animate ng-enter ng-enter-active" wasn't removed from the elements.
If the problem is only with the element that doesn't exist because of the templateUrl I would still expect it will remove those classes when it "finish" the animation.

What more interesting is that when I'm using "keyframes" for animation it works.
https://plnkr.co/edit/WTBVrcOmKotG7PNMk2A7?p=preview -> Angular 1.5 not working
https://plnkr.co/edit/GSBQwIlgHpRzxSRDKBE4?p=preview -> Angular 1.5 works with keyframes.

If you like you can change the test to use 1.4.9 in the index.html and see that the first example works as well.

But even when it works using keyframes the unwanted classes ("ng-animate", etc..) still there.

BTW - Since it works as it should in 1.4.9 can we say it's regression?

[xavadu]

@Narretz. any update about it? or how I can help to solve it faster?
Thanks

[gkalpak]

This is loosely related to #15510. Actually, I think it is a combination of #15510 and some other issue (yet to be determined).

[gkalpak]

You can grab the angular-animate.min.js from this plnkr to try out #15514 (which fixes #15510). It improves the situation (especially if you pre-cache your templates), but does not solve the problem(s) entirely.

Also, note that if you are using a non-cached templateUrl your animations might not look the way you expect them and that is...expected behavior (see the discussion around https://github.com/angular/angular.js/issues/15510#issuecomment-267548547 for more info).

Yet, I suspect there is still some other issue that we need to track down (and fix).

[gkalpak]

BTW, @lishner's example is the exact same as #15510 (and thus fixed by #15514 to the extend permitted given https://github.com/angular/angular.js/issues/15510#issuecomment-267548547).

[xavadu]

@gkalpak yes, at the moment to solve the problem I embed the template in the directive using _template_ instead of _templateUrl_, I wil ltake a look tot he plnkr and related issues

[gkalpak]

I am going to close this since this is partly solved by #15514 and partly a duplicate of #14074 (see also https://github.com/angular/angular.js/issues/14074#issuecomment-269863352).