Animations not working with 1.4.x releases, ok with 1.3

[zakhenry]

I'm building a single page application with angular material and for some reason the animations are not functioning.

It looks like it is not just angular material as I can't get the basic example on the https://docs.angularjs.org/guide/animations page to work.

It appears that the classes that angular material relies on to be added for the css animations to hook on to are not being applied. Inspecting the elements in chrome I just see the hide and show classes but none of the transition classes.

Relevant parts of my bower file:

    "angular": "~1.4.1",
    "angular-animate": "~1.4.1",
    "angular-sanitize": "~1.4.1",
    "angular-messages": "~1.4.1",
    "angular-i18n": "~1.4.1",
    "angular-ui-router": "~0.2.15",
    "angular-material": "~0.10.0",

My site (in development) is at http://www.zakhenry.com and the animation test page is at http://www.zakhenry.com/#/blog
When the viewport is small (ie mobile width) I should be able to see the sidepane animate out like on the https://material.angularjs.org/latest/ site; instead it just appears and disappears.

Source code is at https://github.com/xiphiaz/zakhenry.com

update
I can actually access the nganimate api eg if I run $animate.leave(); in a controller I get an error thrown from angular-animate, indicating the module is loaded successfully. Also adding breakpoints in the ng animate vendor works.

If I call console.log($animate.enabled()) in the run() phase I get false in the console. I tried setting it to true with $animate.enabled(true), to no effect.

[lgalfaso]

ping @matsko

[havenchyk]

@xiphiaz could you try exclude angular-material and investigate, is it a problem of ng-animate?

[matsko]

It looks like there is something going on within Material. I'll be pairing with @ThomasBurleson today to see what the issue is.

[Tathanen]

I think I'm suffering from this as well, using 1.4.x. No animation classes appear, despite ngAnimate being included as a module. console.log( $animate.enabled() ) returns false in all my controllers.

(not using material in my case)

[Tathanen]

Oh, and yes, reverting to 1.3.x solves the issue immediately.

[ThomasBurleson]

@Tathanen - do you have a small-sized demo that we can use to debug and investigate?

[zakhenry]

@ThomasBurleson my (very much unfinished) personal site is fairly small with angular material and angular animate. Reverting to 1.3 works for me.

https://github.com/xiphiaz/zakhenry.com

[Tathanen]

@ThomasBurleson nothing public unfortunately. If @xiphiaz's site isn't enough I can see if I can get something together, though.

[matsko]

Please do. The more simple the demo, the faster we can get this fixed.

[Tathanen]

Alright, I've thrown together a super-pared-down example based on my codebase:

http://www.coryfaller.com/angular_animate/index.html#/admin/users

The table/array is supposed to show once it's non-empty, with a little fade-in effect. Which is effectively immediately, once the controller runs. On 1.4.x, the table just appears with no animation. I'm using angular-1-4.js in the example to load angular in there. Swapping for angular-1-3.js, and thus angular 1.3.x, makes the animation work.

[zakhenry]

@Narretz can this issue have the milestone switched to 1.4.x as this has been confirmed and reproduced by multiples sources?

[Narretz]

@xiphiaz Thanks for the repros. I still can't switch the milestone, since I have to check out your app and verify that it's working with 1.3.x and not working with 1.4.x. There's also still a lot of stuff in the repo, so getting the bottom of this is more difficult.
Anyway, can you please check if it works with the latest 1.4.x snapshot? It has a number of animation fixes.

[zakhenry]

@Narretz I have just tried with latest snapshot of both angular & angular-animate v1.4.4-build.4108+sha.344dffb however no success. I also earlier in the day tried the latest angular material, as I noticed others are reporting similar issues, but no dice.

[Tathanen]

I ran through some 1.4.0 beta releases to see if I could nail down when the issue first presented in my case, it looks like 1.4.0-rc.0 is the breaking build. Things still worked fine on 1.4.0-beta.6.

[Tathanen]

@matsko @ThomasBurleson were you able to see this issue using the example I provided? Is there anything else I can do to help this get diagnosed?

[ThomasBurleson]

@Taritsyn, @xiphiaz - The Angular Material fixes [to use $animateCss] are in both the

• PR - fix(dialog, menu, select, interimElement): use $animateCss instead of transitionEnd events. material#3949
• Branch - https://github.com/angular/material/tree/wip/use_animatecss

That branch will be merged into master on Monday or Tuesday... at which time you should be able to validate use of Angular Material with Angular 1.4.x

[Tathanen]

@ThomasBurleson The issue as demonstrated in my example makes no use of Angular Material, it's just stock Angular 1.4.x and angular-animate.

[ThomasBurleson]

@Tathanen - My apologies. I was tracking issues where Angular material and ngAnimate 1.4.x overlap. Please disregard [my comments] if you are not using Angular Material.

[Tathanen]

So, a few things.

One, my demo is a bit misleadinig on the "animate enabled" flag. I've discovered that when first running the code in a controller, $animate.enabled() returns false, because the flag only sets to true after the first digest cycle is complete. If I put it in a timeout, it displays true.

Two, I've been able to make my animations work if I use ng-if instead of ng-show. The enter/leave classes appear as they should, when I do something like this:

.the-thing.ng-enter {
  transition: all ease 1s;
  opacity: 0;
}
.the-thing.ng-enter.ng-enter-active {
  opacity: 1;
}

When I use ng-show, though, my problems persist. The transition classes simply never appear. I've tried a wide variety of combinations to get things moving, referencing the doc here:

https://code.angularjs.org/1.4.3/docs/api/ng/directive/ngShow

The doc is pretty confusing, though, since the "note about animations" section and actual example at the bottom say different things. The note section claiming that you need to add a zero-duration transition at the start to properly apply all styling in 1.3.x, and another section requiring an alternative to display:none for hiding, but none of this is actually present in the example at the bottom, so I'm not really sure what is or isn't actually required.

Regardless, this is what I'm trying now, and it still does not produce the transition classes when my element goes from hidden to visible:

.animate-show.ng-hide:not(.ng-hide-animate) {
  /* this is just another form of hiding an element */
  display: block!important;
  position: absolute;
  top: -9999px;
  left: -9999px;
}

.animate-show.ng-hide-remove {
  transition: all linear 0s;
  opacity: 0;
}

.animate-show.ng-hide-remove.ng-hide-remove-active {
  transition: all linear 1s;
  opacity: 1;
}

I tried a more direct class-based animation but was met with similar issues.

.item {
  transition: all linear 1s;
  opacity: 0;
}
.item.showme-add {
  background-color: black;
}
.item.showme {
  background-color: white;
  opacity: 1;
}

This animates the opacity, but not the background color. Because the "-add" class is never added, it's an immediate transition to the .showme class when I toggle the class on.

So in summary, it looks like my issue here is with class-based animations in 1.4.x, and the intermediary add/remove classes never being added.

[elciok]

I've got a small snippet that might help getting a better insight about this issue. It works with Angular 1.3.17 but doesn't work with 1.4.3. It works if you don't include ngAnimate. It works if you replace ng-show with ng-if.

https://gist.github.com/elciok/b219709239f1c0d4fa62

[zakhenry]

@ThomasBurleson really? Wouldn't That would mean that we can't have any angular bindings in the <head> - like title? It's worth noting both https://material.angularjs.org and https://docs.angularjs.org have their ng-app on the html tag.

[matsko]

It shouldn't matter if it's on body or html. The issue is that it somehow gets placed on a comment around where <ui-view> exists. We just need to change ngAnimate to somehow detect that the $rootElement exists on a comment node.

[ThomasBurleson]

@xiphiaz - I was recommending a generalized best-practice.
@matsko - Thx for the clarification. Agreed that would be a great check/fix.

[gkalpak]

I was recommending a generalized best-practice

Is there any reason why putting ng-app on <html> isn't a good practice (or do you mean that it is common to put it on the body) ?

(I personally think either is equally good a practice - but I might be missing something 😃)

[ThomasBurleson]

@gkalpak - IMO ng-app establishes the context for directives and controllers... I have never needed that functionality outside the body, hence the recommendation.

[gkalpak]

I usually like being able to ng-bind the <title> in <head>, but other than that I don't think I've ever done anything else with Angular outside of <body> (not that I haven't tried 😛).

[Tathanen]

Yeah, every Angular app I've developed has modified the meta title tag on route change, I'd certainly recommend ng-app as high up in the DOM as possible as the best practice. I'll also define a "site" controller on the HTML tag to contain the logic for those kind of high-level actions.

[ThomasBurleson]

@Tathanen - interesting. Thank you for this.
@ALL - Is this best practice in John Papa's AngularJS Best Practices / Style Guide?

[ddennis]

I am not sure if this is fixed or not ?
Which version is stabel?

[ThomasBurleson]

• Angular Material HEAD is working with AngularJS Latest Release versions:
• Angular 1.3.19 (or greater)
• Angular 1.4.6 (or greater).
• Angular Material HEAD urls:
• Bower Install - https://github.com/angular/bower-material/blob/master/angular-material.js
• Bower Install - https://github.com/angular/bower-material/blob/master/angular-material.css
• RAWGIT - https://rawgit.com/angular/bower-material/master/angular-material.js
• RAWGIT - https://rawgit.com/angular/bower-material/master/angular-material.css

[MadMub]

Any updates?

Currently still experiencing animation issues when using material 0.11, UI router 0.2.15, and angular 1.4

I couldn't tell from the comments, is it fixed if the app is bootstrapped on the body and ui-view placed on a child div?

My project bootstraps on html and ui-views directly on body.

[Tathanen]

For the record, 1.4.4 fixed my usecase.

[MadMub]

Just tested today with 1.4.6, are you using ui-router, if so where is your top level UI router (mine currently on body tag). Thanks.

[MadMub]

Sorry, meant to say if so where is top-level ui-views.

[dannymcpherson]

In case it helps anyone, my sidebar animations were broken with

• angular#1.4.4
• angular-material#0.10.1
• angular-animate#1.4.4
• angular-ui-router#0.2.14

Upgrading to angular-animate#1.4.7 fixed the issue.

[ghost]

I also have the same problem with $animate.addClass, animation classes are not being added. I am using:
#1.4.7
angular-animate#1.4.7
I am not using angular-material.

[Edorka]

Same from me with 1.4.7 in both angular and angular-animate

[russhendy]

Using 1.4.7 I found that the issue seemed to be that my BODY element was an ng-app and and ng-view. As discussed above I altered this like so:

 <body ng-app="myApp">
    <div class="bodycontainer" ng-view="">
    </div>
    ...
 </body>

... and my animations started to work.

[ThomasBurleson]

@russhendy 👍

[zakhenry]

Angular 1.4.7 seems to have fixed my original issue - angular animate is now working again.

Also, to confirm setup with others, I'm using angular material and ui router, with the ng-app on the <html> and the ui-view on the <body>

<!DOCTYPE html>
<html ng-app="app" ng-strict-di>
    <head>
        <title>{{AppController.pageTitle}}</title>
        <base href="/" />

    </head>

    <body ui-view="app" layout="column" layout-fill></body>

</html>

[IDontEatSoap]

ngAnimate works here (1.3.8): https://gist.githubusercontent.com/bennadel/89c1659b1ce489e248a6/raw/0192d1479b95b5007af02d308dc62ffe619412da/pre-bootstrap-screen.htm - http://bennadel.github.io/JavaScript-Demos/demos/pre-bootstrap-loading-screen-angularjs/

But does not work here (1.4.7): http://codepen.io/IDontEatSoap/pen/JYBJwV

Ideas?

[jherman]

I'd like to add that I am also still seeing this issue. I had a hard time finding related google searches based on this issue, so instead I posted this issue on stackoverflow at the time:

http://stackoverflow.com/questions/33420664/angularjs-why-are-the-animation-classes-not-appended-during-ng-hide-show-transi

Just found this case issue today, and wanted to let you know I've tried the steps here, upgrading to

1.4.7 angular/angular-router
0.2.15 ui-router
0.11.4 angular material

My current ng-app is at <html> (I have a controller there too), and originally my ui-view was one child below <body>. Tried moving ui-view to <body>, but that didn't help. Any ideas?

[jherman]

I've added a codepen showing this:

http://codepen.io/anon/pen/OyoyYX?editors=101

If you are using chrome, look into the debugger browser. You can see the enter/etc classes are not being attached.

[pauloinfotec]

Hi, i am trying to use animation with angular 1.4.7 and angular-strap to animate my modals and alert messages. Someone can help me ?

[SuneRadich]

I too see issues with ngAnimate, both in Angular 1.4.7 and Angular 1.5.0.b2. I am using ui.router 0.2.15.

The weird part is, that animations work as expected when switching states in ui.router, but the animation classes are not added for ng-repeat directives in the views.

[sDaniel]

For me the cause for css classes not being applied seemed to have been an old version of angular-bootstrap (ui-bootstrap-tpls.js) which I updated from ~0.13.4 to ~0.14.3. (Angular 1.4.x)

[rschoenbichler]

same problem here,
animation classes are only added to the view container

[Narretz]

@jherman Your ng-show / hide elements have no animation CSS associated with them, that's why the classes are never added.

[Narretz]

Hi,
I'm going to lock this conversation for the following reasons:
The original problem has been fixed. Any new post here is basically lost, as the issue is closed. It's also quite possible that you have different problems, so it's just confusing to have all of them in one issue.
For anyone who still has problems with ngAnimate when switching to 1.4, please open a new issue with a minimal reproduction / demo, in plnkr.co or codepen. Thanks!