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

Commit 7c011e7

Browse files
committed
fix($animate): remove the need to add display:block!important for ngShow/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
1 parent 36b2bba commit 7c011e7

File tree

2 files changed

+6
-20
lines changed

2 files changed

+6
-20
lines changed

css/angular.css

+6
Original file line numberDiff line numberDiff line change
@@ -9,3 +9,9 @@
99
ng\:form {
1010
display: block;
1111
}
12+
13+
/* show the element during a show/hide animation when the
14+
* animation is ongoing, but the .ng-hide class is active */
15+
.ng-hide-add-active, .ng-hide-remove {
16+
display: block!important;
17+
}

src/ng/directive/ngShowHide.js

-20
Original file line numberDiff line numberDiff line change
@@ -40,9 +40,6 @@
4040
* restating the styles for the .ng-hide class in CSS:
4141
* ```css
4242
* .ng-hide {
43-
* /* Not to worry, this will override the AngularJS default...
44-
* display:block!important;
45-
*
4643
* /* this is just another form of hiding an element */
4744
* position:absolute;
4845
* top:-9999px;
@@ -72,9 +69,6 @@
7269
* /* this is required as of 1.3x to properly
7370
* apply all styling in a show/hide animation */
7471
* transition:0s linear all;
75-
*
76-
* /* this must be set as block so the animation is visible */
77-
* display:block!important;
7872
* }
7973
*
8074
* .my-element.ng-hide-add-active,
@@ -126,11 +120,6 @@
126120
background:white;
127121
}
128122
129-
.animate-show.ng-hide-add,
130-
.animate-show.ng-hide-remove {
131-
display:block!important;
132-
}
133-
134123
.animate-show.ng-hide-add.ng-hide-add-active,
135124
.animate-show.ng-hide-remove.ng-hide-remove-active {
136125
-webkit-transition:all linear 0.5s;
@@ -214,9 +203,6 @@ var ngShowDirective = ['$animate', function($animate) {
214203
* restating the styles for the .ng-hide class in CSS:
215204
* ```css
216205
* .ng-hide {
217-
* //!annotate CSS Specificity|Not to worry, this will override the AngularJS default...
218-
* display:block!important;
219-
*
220206
* //this is just another form of hiding an element
221207
* position:absolute;
222208
* top:-9999px;
@@ -244,7 +230,6 @@ var ngShowDirective = ['$animate', function($animate) {
244230
* //
245231
* .my-element.ng-hide-add, .my-element.ng-hide-remove {
246232
* transition:0.5s linear all;
247-
* display:block!important;
248233
* }
249234
*
250235
* .my-element.ng-hide-add { ... }
@@ -292,11 +277,6 @@ var ngShowDirective = ['$animate', function($animate) {
292277
background:white;
293278
}
294279
295-
.animate-hide.ng-hide-add,
296-
.animate-hide.ng-hide-remove {
297-
display:block!important;
298-
}
299-
300280
.animate-hide.ng-hide {
301281
line-height:0;
302282
opacity:0;

0 commit comments

Comments
 (0)