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

Also add .ng-hide-remove styling #3813

Closed
bfanger opened this issue Aug 30, 2013 · 9 comments
Closed

Also add .ng-hide-remove styling #3813

bfanger opened this issue Aug 30, 2013 · 9 comments

Comments

@bfanger
Copy link
Contributor

bfanger commented Aug 30, 2013

AngularJS inject styling for .ng-hide in the
.ng-hide{display:none !important;}

This is fine, but causes confusion when animating with ng-show, because the element became visible at the end of the animation (not showing the animation at all, just a delay).

I suggest also injecting the css rule .ng-hide-remove{display:block !important;}

@matsko matsko closed this as completed in 7c011e7 Jun 4, 2014
@matsko
Copy link
Contributor

matsko commented Jun 4, 2014

Just thought of this as well and this makes show/hide animations much easier. Thanks! :)

matsko added a commit that referenced this issue Jun 4, 2014
…how/ngHide

Since ngShow/ngHide animations add and remove the .ng-hide class, having to remember
to write display:block on your own is a hassle and leads to problematic animation
code. This fix places a default on the animation for you instead.

Closes #3813
@Francisc
Copy link

What happens when the element's display is not block?

@matsko
Copy link
Contributor

matsko commented Jun 22, 2014

In 1.3, it doesn't matter since the selector is different. However for 1.2, since IE8 doesn't support the :not() selector, it sets the value to block. To get around this then you'll need to do display: value!important in your selector. 1.3 works with any display property.

@Francisc
Copy link

OK. It should have been documented as breaking change though.

Setting the display with !important works of course, but I need to set it in all of the classes set by an animation. Whereas before, just setting properties on the minimum number of classes required to achieve the animation was enough.

In anycase, thank you for the reply. It's clear what I must do.

@Francisc
Copy link

I wonder if something like inherit would have worked.

@matsko
Copy link
Contributor

matsko commented Jun 26, 2014

The problem is that the 1.2 CSS code still has .ng-hide on there when you're setting display:inherit so the none property will be inherited.

@Francisc
Copy link

Francisc commented Jul 1, 2014

Ah, so that won't work.

@Narretz
Copy link
Contributor

Narretz commented Jul 7, 2014

I also have a problem with this commit. I have an element that uses an infinite animation (without ngAnimate). While using ng-show (also without ngAnimate), when hiding the element,, there is a noticable delay until the element actually disappears. I guess $animate thinks there is an animation or something. See this plunker:

http://plnkr.co/edit/5cfIXfNryNOzK66q9YWL?p=preview

It's also inconvenient that the css rule is living in angular.css, which now prevents me from upgrading angular core beyond 1.2.16

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

4 participants