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

Commit 55b2f0e

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 ca566d8 commit 55b2f0e

File tree

2 files changed

+7
-18
lines changed

2 files changed

+7
-18
lines changed

css/angular.css

+6
Original file line numberDiff line numberDiff line change
@@ -14,3 +14,9 @@ ng\:form {
1414
transition:0s all!important;
1515
-webkit-transition:0s all!important;
1616
}
17+
18+
/* show the element during a show/hide animation when the
19+
* animation is ongoing, but the .ng-hide class is active */
20+
.ng-hide-add-active, .ng-hide-remove {
21+
display: block!important;
22+
}

src/ng/directive/ngShowHide.js

+1-18
Original file line numberDiff line numberDiff line change
@@ -40,10 +40,8 @@
4040
* restating the styles for the .ng-hide class in CSS:
4141
* ```css
4242
* .ng-hide {
43-
* //!annotate CSS Specificity|Not to worry, this will override the AngularJS default...
43+
* /* this is just another form of hiding an element */
4444
* display:block!important;
45-
*
46-
* //this is just another form of hiding an element
4745
* position:absolute;
4846
* top:-9999px;
4947
* left:-9999px;
@@ -70,7 +68,6 @@
7068
* //
7169
* .my-element.ng-hide-add, .my-element.ng-hide-remove {
7270
* transition:0.5s linear all;
73-
* display:block!important;
7471
* }
7572
*
7673
* .my-element.ng-hide-add { ... }
@@ -118,11 +115,6 @@
118115
background:white;
119116
}
120117
121-
.animate-show.ng-hide-add,
122-
.animate-show.ng-hide-remove {
123-
display:block!important;
124-
}
125-
126118
.animate-show.ng-hide {
127119
line-height:0;
128120
opacity:0;
@@ -200,9 +192,6 @@ var ngShowDirective = ['$animate', function($animate) {
200192
* restating the styles for the .ng-hide class in CSS:
201193
* ```css
202194
* .ng-hide {
203-
* //!annotate CSS Specificity|Not to worry, this will override the AngularJS default...
204-
* display:block!important;
205-
*
206195
* //this is just another form of hiding an element
207196
* position:absolute;
208197
* top:-9999px;
@@ -230,7 +219,6 @@ var ngShowDirective = ['$animate', function($animate) {
230219
* //
231220
* .my-element.ng-hide-add, .my-element.ng-hide-remove {
232221
* transition:0.5s linear all;
233-
* display:block!important;
234222
* }
235223
*
236224
* .my-element.ng-hide-add { ... }
@@ -278,11 +266,6 @@ var ngShowDirective = ['$animate', function($animate) {
278266
background:white;
279267
}
280268
281-
.animate-hide.ng-hide-add,
282-
.animate-hide.ng-hide-remove {
283-
display:block!important;
284-
}
285-
286269
.animate-hide.ng-hide {
287270
line-height:0;
288271
opacity:0;

0 commit comments

Comments
 (0)