Enter/leave animation not working in 1.4.4

[Foxandxss]

Hello, I have a library that animates the pop up of notifications and it is not working anymore in 1.4.4

It animates the first notification but not the rest of them (Foxandxss/angular-toastr#121).

I have been able to create a minimal plunker with the idea. The plunker is on 1.4.3 and except the first popup (probably a mistake on my part), all the toasts are being animated.

If you bump angular and angular-animate to 1.4.4 on the plunker, no animation (the ng-enter classes and stuff are not applied).

Plunker doesn't show the .leave animations, but it is the same behavior.

http://plnkr.co/edit/7JlKsjf4XG5aHGaFnuSG?p=info

Whats going on? :)

[patrickstubner]

Hi, I do have the same problem.
Seems that the "ng-enter" class will not be applied for the enter animation.

Thanks for your work.

[matsko]

@patrickstubner could you please give me a code example of what's breaking?

[matsko]

@Foxandxss this is a more complicated issue than expected.

Turns out that when templateUrl is used with a directive the element returned from $compile is an element that points to the template node (not the final compiled node). So ngAnimate ends up animating a temporary element where its contents will be updated with the downloaded-and-compiled-template data (in this case toast.html).

In 1.4.4 we changed the way the CSS classes are handled and they're applied early. This works, but those CSS classes are applied to the template element (not the final element). This can be fixed for 1.4.5, but the bigger issue is that we currently don't have a way of having animations wait to enter in the element animation once the template has been downloaded.

I'll have some code to show soon. Once this is fixed your code should work the same, however, in production I advise that you eagerly download the directive template ahead of time to avoid a race condition between $animate and $compile.

[Foxandxss]

Uhm, so it shouldn't happen if I have my templates on templateCache, right?

Check this: http://plnkr.co/edit/CJyeeeeKMYWCD2pBhgRK

[matsko]

In 1.4.5 yes the templateCache trick will work.

In 1.4.4 you'll need to use template instead of templateUrl.

[Foxandxss]

I see. That works for me.

I tell my users to download the templates before hand to use my library so I guess I can tell him to avoid 1.4.4 for now and wait for 1.4.5 fix.

Well that or swapping my code to use template instead of templateUrl.

Thank you.

[matsko]

Alright we've made a change in 1.4.5 that should restore the functionality:
http://plnkr.co/edit/2gssXoZWekpFNIC2CScf?p=preview

This still doesn't fix the issue of $compile downloading a templateUrl so once 1.4.5 is in please patch your plugin to eagerly load the template into $templateCache so this works.

[Foxandxss]

I can confirm that this patch does the work @matsko

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

Thank you Matias, good work on that.

[doconnor78]

@matsko I am trying to use animations in angular 1.4.x but am failing.. I've the following simple code working with 1.3.x
http://plnkr.co/edit/A6OPC9ERFv2izlrZmFib?p=preview
But the following fails when moving to 1.4.7
http://plnkr.co/edit/zDGyb4HVcKXqB4Y6Yao1?p=preview
Thoughts?

[cvn]

I had a related issue in more recent Angular versions, including 1.6.0.

If a templateUrl directive and ng-repeat are on the same element <div my-dir ng-repeat="...">, the enter animation doesn't work for the first item, even if the template is in $templateCache. Demo

But if the directive is on a child element, the problem goes away, and the animation works.

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

[gkalpak]

@cvn, this seems to be a different/more specific issue. Can you create a new issue for that (providing the details above).

_{Really nice and easy-to-follow demo, btw! 👍}

[joselee]

Hi, I ran into this same issue with angular v1.5.10. The css class 'ng-enter' was not being added on first run to the element with ng-if while using templateCache. I had to inline my template with 'template' instead of 'templateUrl' for animations to work correctly the first time.

[gkalpak]

@joselee, can you grab the angular-animate.min.js file from here and verify that your original usecase (with the $templateCache) is fixed?