search

angular / angular.js

AngularJS - HTML enhanced for web apps!
https://angularjs.org
MIT License
58.8k stars 27.49k forks source link

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

Closed zakhenry closed 9 years ago

zakhenry commented 9 years ago

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 commented 9 years ago

ping @matsko

havenchyk commented 9 years ago

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

matsko commented 9 years ago

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

Tathanen commented 9 years ago

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 commented 9 years ago

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

ThomasBurleson commented 9 years ago

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

zakhenry commented 9 years ago

@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 commented 9 years ago

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

matsko commented 9 years ago

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

Tathanen commented 9 years ago

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 commented 9 years ago

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

Narretz commented 9 years ago

@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 commented 9 years ago

@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 commented 9 years ago

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 commented 9 years ago

@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 commented 9 years ago

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

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 commented 9 years ago

@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 commented 9 years ago

@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 commented 9 years ago

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 commented 9 years ago

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

matsko commented 9 years ago

There is a fix in the PR queue right now (issue #12554) that takes care of the issue:

Here is a demo with the code you provided mixed together with the updated angular.js and angular-animate.js files: http://plnkr.co/edit/kCT1pvpI9TUwGTNM7oJz?p=preview

zakhenry commented 9 years ago

@matsko I've just tested the fix with bower install angular-animate#1.4.4-build.4168+sha.92e41ac --save which required that I get a later version of angular :

bower angular                                            resolution Saved angular#1.4.4-build.4168+sha.92e41ac as resolution
bower angular#1.4.4-build.4168+sha.92e41ac                  install angular#1.4.4-build.4168+sha.92e41ac

angular#1.4.4-build.4168+sha.92e41ac bower_components/angular

I am still getting issues with some animations but not all (Using angular material things like side drawers and dialogs don't animate, but the md-tabs bottom border, and md-tabs content does animate.

matsko commented 9 years ago

Did you also update Material?

zakhenry commented 9 years ago

@matsko I'm on material v0.10.1 - do I need a later hash?

matsko commented 9 years ago

OK. Could we pair on this tomorrow to figure out what's going on?

zakhenry commented 9 years ago

@matsko yep sure, I'm testing this on a fairly large application now, so I'll prove the issue on my personal site as I can share that code easily.

ndaian commented 9 years ago

I am having a similar issue: the ng-hide-add and ng-hide-remove classes are not generated. I am not using Material though. Debugging ngAnimate I noticed that all animations are skipped because:

I am wondering if this is known issue.

Thank you,

Nicu

zakhenry commented 9 years ago

To help with debugging; I am also using ui-router which could be the root issue. I think if there is an incompatibility with ui-router it needs to be addressed as many angular apps depend on ui-router.

TylersDesk commented 9 years ago

Just started a very fresh project. Having similar issues. I am NOT using ui-router Here are my libraries:

├─┬ angular-material#0.10.1 │ ├── angular#1.4.4 (1.4.5-build.4192+sha.ea8016c available) │ ├─┬ angular-animate#1.4.4 (1.4.5-build.4192+sha.ea8016c available) │ │ └── angular#1.4.4 (latest is 1.4.5-build.4192+sha.ea8016c) │ └─┬ angular-aria#1.4.4 (1.4.5-build.4192+sha.ea8016c available) │ └── angular#1.4.4 ├─┬ angular-material-icons#0.5.0 │ └── angular#1.4.4 (1.4.5-build.4192+sha.ea8016c available)

If you want to investigate further: https://github.com/TylersDesk/DGM3760/commit/dd77b1b984e59ff7c3950684c07d38f79eb3b752

Let me know if there is any way I can help.

AleksueiR commented 9 years ago

@ndaian, @TylersDesk I was having the exact same issue with the $rootElement pointing to the comment and it was breaking with both native and ui routers.

Turned out the $rootElement was pointing to the comment only if the app was bootstrapped on the same node as ng-include or ui-view. Bootstrapping onto the parent of that node seems to solve the problem.

Here's a plunk displaying the issue: http://plnkr.co/edit/Ds8e8d?p=preview

Related: #12583, https://github.com/angular/material/issues/4626

ThomasBurleson commented 9 years ago

In general: the bootstrap or use of ng-app should be on the body node containing a nested ui-view

zakhenry commented 9 years ago

@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 commented 9 years ago

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 commented 9 years ago

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

gkalpak commented 9 years ago

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 :smiley:)

ThomasBurleson commented 9 years ago

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

gkalpak commented 9 years ago

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 :stuck_out_tongue:).

Tathanen commented 9 years ago

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 commented 9 years ago

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

ddennis commented 9 years ago

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

ThomasBurleson commented 9 years ago
MadMub commented 9 years ago

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 commented 9 years ago

For the record, 1.4.4 fixed my usecase.

MadMub commented 9 years ago

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 commented 9 years ago

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

dannymcpherson commented 9 years ago

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

Upgrading to angular-animate#1.4.7 fixed the issue.

ghost commented 9 years ago

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

Edorka commented 9 years ago

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

russhendy commented 9 years ago

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 commented 9 years ago

@russhendy :+1: