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:
@@ -14,3 +14,9 @@ ng\:form {
|
||||
transition:0s all!important;
|
||||
-webkit-transition:0s all!important;
|
||||
}
|
||||
|
||||
/* show the element during a show/hide animation when the
|
||||
* animation is ongoing, but the .ng-hide class is active */
|
||||
.ng-hide-add-active, .ng-hide-remove {
|
||||
display: block!important;
|
||||
}
|
||||
|
||||
@@ -40,10 +40,8 @@
|
||||
* 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...
|
||||
* /* this is just another form of hiding an element */
|
||||
* display:block!important;
|
||||
*
|
||||
* //this is just another form of hiding an element
|
||||
* position:absolute;
|
||||
* top:-9999px;
|
||||
* left:-9999px;
|
||||
@@ -70,7 +68,6 @@
|
||||
* //
|
||||
* .my-element.ng-hide-add, .my-element.ng-hide-remove {
|
||||
* transition:0.5s linear all;
|
||||
* display:block!important;
|
||||
* }
|
||||
*
|
||||
* .my-element.ng-hide-add { ... }
|
||||
@@ -118,11 +115,6 @@
|
||||
background:white;
|
||||
}
|
||||
|
||||
.animate-show.ng-hide-add,
|
||||
.animate-show.ng-hide-remove {
|
||||
display:block!important;
|
||||
}
|
||||
|
||||
.animate-show.ng-hide {
|
||||
line-height:0;
|
||||
opacity:0;
|
||||
@@ -200,9 +192,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;
|
||||
@@ -230,7 +219,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 { ... }
|
||||
@@ -278,11 +266,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;
|
||||
|
||||
Reference in New Issue
Block a user