Skip to content
This repository was archived by the owner on Apr 12, 2024. It is now read-only.

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

Closed
e-cloud opened this issue Aug 20, 2015 · 7 comments
Closed

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

e-cloud opened this issue Aug 20, 2015 · 7 comments

Comments

@e-cloud
Copy link

e-cloud commented Aug 20, 2015

when i update to angular 1.4.4, there is a strange thing -- some animation i define for the element with ng-hide directive doesn't seem to work. Then i check the api docs. Ok, the 1.4.4 version docs of ng-show's example plunkr seems to have no animation too.

Does Angular have enough tests before the new version is about to release?

@Narretz
Copy link
Contributor

Narretz commented Aug 20, 2015

Can you please provide a demo of the problem? Otherwise, we cannot do anything to fix the problem.

@A11oW
Copy link

A11oW commented Aug 20, 2015

Just look how work original example or plunker
when check labels angular don't add intermediates classes:

.ng-hide-add
.ng-hide-add-active,
.ng-hide-remove
.ng-hide-remove-active

@A11oW
Copy link

A11oW commented Aug 20, 2015

I think that problems related with #12612, #12583

@Narretz
Copy link
Contributor

Narretz commented Aug 20, 2015

Ok, I see now. @matsko can you take a look at this? It seems pretty bad if even the "official" ng-hide animations aren't working.

@Narretz Narretz modified the milestones: 1.4.5, Purgatory Aug 20, 2015
matsko added a commit to matsko/angular.js that referenced this issue Aug 20, 2015
The animation example contains unnecessarily complex CSS animation
code in it and the conventions are off.

Related angular#12631
matsko added a commit to matsko/angular.js that referenced this issue Aug 20, 2015
The animation example contains unnecessarily complex CSS animation
code in it and the conventions are off.

Related angular#12631
@matsko
Copy link
Contributor

matsko commented Aug 20, 2015

Turns out that the API docs example code is incorrect. Transitions always need to be applied to the non active CSS class:
http://plnkr.co/edit/JzI0NnxtPdySR2sMcGeW?p=preview

Or on the class that is being added or removed:
http://plnkr.co/edit/EdhLQkurZRRYjhmSUrrX?p=preview

Or on a shared CSS class that is always there:
http://plnkr.co/edit/HX9BQwtwJ5WvylbWVOa3?p=preview

Placing it on the active CSS classes may have worked before, however it was never intended. But not to worry, I will look into making the fix properly for 1.4.5. Here is an issue to keep note of that:
#12638

In the meantime here is a commit that will clean up the example in the docs a bit so nobody else comes across this issue:
#12637

matsko added a commit to matsko/angular.js that referenced this issue Aug 20, 2015
…e active classes

This allows for CSS transitions to be defined on the active CSS class if
desired.

Closes angular#12631
matsko added a commit that referenced this issue Aug 20, 2015
The animation example contains unnecessarily complex CSS animation
code in it and the conventions are off.

Related #12631
@matsko
Copy link
Contributor

matsko commented Aug 25, 2015

Sorry I provided the wrong link earlier. Here is a patched version of angular.js that fixes the issue: http://plnkr.co/edit/YLTe1SObEAaQn99iOiNv?p=preview

This patch will debut in 1.4.5

matsko added a commit to matsko/angular.js that referenced this issue Aug 25, 2015
This reverts the previous behaviour of using foreced reflows to deal
with preparation classes in favour of a system that uses
requestAnimationFrame (RAF).

Closes angular#12669
Closes angular#12594
Closes angular#12655
Closes angular#12631
Closes angular#12612
matsko added a commit to matsko/angular.js that referenced this issue Aug 25, 2015
This reverts the previous behaviour of using foreced reflows to deal
with preparation classes in favour of a system that uses
requestAnimationFrame (RAF).

Closes angular#12669
Closes angular#12594
Closes angular#12655
Closes angular#12631
Closes angular#12612
Closes angular#12187
@A11oW
Copy link

A11oW commented Aug 26, 2015

@matsko thx! =)

matsko added a commit to matsko/angular.js that referenced this issue Aug 27, 2015
This reverts the previous behaviour of using foreced reflows to deal
with preparation classes in favour of a system that uses
requestAnimationFrame (RAF).

Closes angular#12669
Closes angular#12594
Closes angular#12655
Closes angular#12631
Closes angular#12612
Closes angular#12187
matsko added a commit to matsko/angular.js that referenced this issue Aug 27, 2015
This reverts the previous behaviour of using foreced reflows to deal
with preparation classes in favour of a system that uses
requestAnimationFrame (RAF).

Closes angular#12669
Closes angular#12594
Closes angular#12655
Closes angular#12631
Closes angular#12612
Closes angular#12187
@matsko matsko closed this as completed in ea8016c Aug 27, 2015
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Development

No branches or pull requests

4 participants