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
This commit is contained in:
Matias Niemelä
2014-05-30 01:16:26 -04:00
parent 36b2bba05f
commit 7c011e79d8
2 changed files with 6 additions and 20 deletions

View File

@@ -40,9 +40,6 @@
* restating the styles for the .ng-hide class in CSS:
* ```css
* .ng-hide {
* /* Not to worry, this will override the AngularJS default...
* display:block!important;
*
* /* this is just another form of hiding an element */
* position:absolute;
* top:-9999px;
@@ -72,9 +69,6 @@
* /* this is required as of 1.3x to properly
* apply all styling in a show/hide animation */
* transition:0s linear all;
*
* /* this must be set as block so the animation is visible */
* display:block!important;
* }
*
* .my-element.ng-hide-add-active,
@@ -126,11 +120,6 @@
background:white;
}
.animate-show.ng-hide-add,
.animate-show.ng-hide-remove {
display:block!important;
}
.animate-show.ng-hide-add.ng-hide-add-active,
.animate-show.ng-hide-remove.ng-hide-remove-active {
-webkit-transition:all linear 0.5s;
@@ -214,9 +203,6 @@ var ngShowDirective = ['$animate', function($animate) {
* restating the styles for the .ng-hide class in CSS:
* ```css
* .ng-hide {
* //!annotate CSS Specificity|Not to worry, this will override the AngularJS default...
* display:block!important;
*
* //this is just another form of hiding an element
* position:absolute;
* top:-9999px;
@@ -244,7 +230,6 @@ var ngShowDirective = ['$animate', function($animate) {
* //
* .my-element.ng-hide-add, .my-element.ng-hide-remove {
* transition:0.5s linear all;
* display:block!important;
* }
*
* .my-element.ng-hide-add { ... }
@@ -292,11 +277,6 @@ var ngShowDirective = ['$animate', function($animate) {
background:white;
}
.animate-hide.ng-hide-add,
.animate-hide.ng-hide-remove {
display:block!important;
}
.animate-hide.ng-hide {
line-height:0;
opacity:0;