Animation not working with 1.4.x and ui-router: ng-hide-add and ng-hide-remove classes are not generated #12583

ndaian · 2015-08-13T22:18:58Z

My issue seems similar with #12267, I left a comment there but since that issue is closed, people might not read it.
@matsko worked on that issue.

ng-hide-add and ng-hide-remove classes are not generated. I am not using Material.

Debugging ngAnimate I noticed that all animations are skipped because:

function 'areAnimationsAllowed' always returns false because:
- rootElementDetected is always false because:
  - $rootElement var points to the element before the actual root element:

The element $rootElement points to is a comment and it is inserted by the ui-view directive which is present on the angular root element.
"ui-view" is a directive belonging to https://github.com/angular-ui/ui-router.

When ngAnimate is initialized $rootElement receives the correct value but probably when ui-router inserts its comment right before the angular root element, $rootElement is not updated. So when the animation happens, $rootElement points to instead of

Because 'areAnimationsAllowed' function does not find the angular root element, it retursn false and all animations are skipped.

matsko · 2015-08-14T21:12:56Z

Is $rootElement always bound to a comment node when ui-router is used? Does this mean that all animations are broken when it is used? Will the comment node be placed as a sibling always to the element that is originally the rootElement?

matsko · 2015-08-14T21:15:58Z

Look at this example we have an app where the rootElement is on <html>:

https://angular-ui.github.io/ui-router/sample/#/

Right click somewhere on the page and select inspect element.
Goto console and run this angular.element($0).injector().get('$rootElement')

See how it's the HTML element?

How did your code end up being situated to where the view was created? Could you share your some code to show how your app is configured?

ndaian · 2015-08-14T22:06:01Z

I'll try to create a plunker and share it with you

ndaian · 2015-08-17T16:18:55Z

starting to work on plunker, but until I have it I can answer you question: in our code the ng-app directive is not on the html element but on the div element that has the ui-view directive.

ndaian · 2015-08-17T19:54:29Z

Here you have the plunker: http://plnkr.co/edit/uB94enS5J2AgI0fPiePM?p=preview

Put the following two breakpoints in angular-animate.js:

breakpoint B1: on line 1939: var activeAnimationsLookup = new $$HashMap();
breakpoint B2: on line 2392: var bodyElementDetected = false; (first line in function areAnimationsAllowed(element, parentElement, event))

Refresh the page

breakpoint B1 will be hit and in console you can see that $rootElement is "[<div ng-app="myapp" ng-controller="MainCtrl" ui-view>…</div>]" = correct

Click on the "Test Animation" button

breakpoint B2 will be hit and in console you can see that $rootElement is "[]" = incorrect
F8 in Developer Tools to continue and you will see that the animation "sort of" happens
- "sort of happens" - because the height doesn't start at zero
Disable breakpoints in Developer Tools and keep clicking on the "Test Animation" button. you will see that the animation will not happen anymore

This behavior is a bit different than what I see in our app. I our app the animation doesn't happen even when debugging. I think that here it works when debugging because of the plunker environment.

ndaian · 2015-08-19T18:22:56Z

Moving the ui-view directive from the ng-app element to its own element workarounds the ngAnimate issue. The comment is inserted now in front of the

element and

is not affected. The animation works now.

Using this

Instead of this

tonis2 · 2015-08-21T14:05:34Z

@ndaian wait how does the workaround work, i have exactly the same problem, but didnt get it to work.

mikehuebner · 2015-08-22T07:24:13Z

Same problem here on angular 1.4.4, any UI View animations just stopped working, pretty sure this is not an ngAnimate issue but a uiRouter issue. We can probably move this to their issues with the same plunk if @Ndian agrees.

matsko · 2015-08-25T17:35:36Z

@ndaian would you mind testing against these files to see if things work:
http://www.angular-dev.com/raf-fix/angular.js
http://www.angular-dev.com/raf-fix/angular-animate.js

ageblade · 2015-08-27T16:05:18Z

I've just had a similar issue however the problem was with the following row:
bodyElementDetected = isMatchingElement(parentElement, $$body);
It is always false because the ui-view directive was assigned to the element and in the angular-animate code the $$body variable is initialized before ui-router populate the view. so it is never equal.

Just want to put it out here for anyone else who might have this problem.

matsko · 2015-10-05T17:26:54Z

Is this still an issue? In 1.4.7 there was a fix to the $$body service.

chance-an · 2015-10-05T18:35:33Z

I am using the latest AngularJS 1.5.0beta + UIRouter 1.4.7. The issue doesn't repro for me.

matsko · 2015-10-06T05:56:48Z

@ndaian what about you?

kevinsuh · 2015-10-08T16:13:47Z

i started having this issue as well. transitions between states are not adding classes from nganimate. any updates on progress?

Narretz · 2015-11-25T14:25:01Z

This bug still repros in this plnkr (#12583 (comment)) with the current snapshot.

pocesar · 2015-12-09T22:19:32Z

having the same problem, but on ng-switch-when. using 1.4.8

Narretz · 2015-12-11T22:25:21Z

I had a look at this and it seems this happens because ngView / uiView are transclude: element directives, which means they replace the element on which they are with a comment node. But I'm not yet sure how the $rootElement value is actually replaced by the comment node.

- Note that bootstrapping on elements with transclusion directives is dangerous and not recommended. - group info on limitations, and add them to the guide Closes angular#11421 Closes angular#13572 Closes angular#12583

Narretz added needs: more info component: ngAnimate labels Aug 15, 2015

Narretz added this to the Purgatory milestone Aug 15, 2015

A11oW mentioned this issue Aug 20, 2015

ngHide/ng-show directive don't animate in ng 1.4.4 #12631

Closed

AleksueiR mentioned this issue Sep 17, 2015

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

Closed

Narretz added type: bug frequency: moderate severity: broken expected use labels Nov 25, 2015

Narretz modified the milestones: 1.4.x, Purgatory Nov 25, 2015

Narretz added severity: regression and removed needs: more info labels Nov 25, 2015

Narretz self-assigned this Dec 11, 2015

Narretz mentioned this issue Dec 23, 2015

Create docs for using [ng-app] on a transcluded element #13572

Closed

Narretz closed this as completed in b04871b Feb 9, 2016

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Animation not working with 1.4.x and ui-router: ng-hide-add and ng-hide-remove classes are not generated #12583

Animation not working with 1.4.x and ui-router: ng-hide-add and ng-hide-remove classes are not generated #12583

ndaian commented Aug 13, 2015

matsko commented Aug 14, 2015

matsko commented Aug 14, 2015

ndaian commented Aug 14, 2015

ndaian commented Aug 17, 2015

ndaian commented Aug 17, 2015

ndaian commented Aug 19, 2015

tonis2 commented Aug 21, 2015

mikehuebner commented Aug 22, 2015

matsko commented Aug 25, 2015

ageblade commented Aug 27, 2015

matsko commented Oct 5, 2015

chance-an commented Oct 5, 2015

matsko commented Oct 6, 2015

kevinsuh commented Oct 8, 2015

Narretz commented Nov 25, 2015

pocesar commented Dec 9, 2015

Narretz commented Dec 11, 2015

Animation not working with 1.4.x and ui-router: ng-hide-add and ng-hide-remove classes are not generated #12583

Animation not working with 1.4.x and ui-router: ng-hide-add and ng-hide-remove classes are not generated #12583

Comments

ndaian commented Aug 13, 2015

matsko commented Aug 14, 2015

matsko commented Aug 14, 2015

ndaian commented Aug 14, 2015

ndaian commented Aug 17, 2015

ndaian commented Aug 17, 2015

ndaian commented Aug 19, 2015

tonis2 commented Aug 21, 2015

mikehuebner commented Aug 22, 2015

matsko commented Aug 25, 2015

ageblade commented Aug 27, 2015

matsko commented Oct 5, 2015

chance-an commented Oct 5, 2015

matsko commented Oct 6, 2015

kevinsuh commented Oct 8, 2015

Narretz commented Nov 25, 2015

pocesar commented Dec 9, 2015

Narretz commented Dec 11, 2015