fix($animate): remove the need to add display:block!important for ngShow/ngHide

matsko · matsko · commit 7c011e79d8b3 · 2014-06-04T14:45:17.000-04:00
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 angular#3813
diff --git a/css/angular.css b/css/angular.css
@@ -9,3 +9,9 @@
 ng\:form {
   display: block;
 }
+
+/* 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;
+}
diff --git a/src/ng/directive/ngShowHide.js b/src/ng/directive/ngShowHide.js
@@ -40,9 +40,6 @@
  * restating the styles for the .ng-hide class in CSS:
  * ```css
  * .ng-hide {
- *   /&#42; Not to worry, this will override the AngularJS default...
- *   display:block!important;
- *
  *   /&#42; this is just another form of hiding an element &#42;/
  *   position:absolute;
  *   top:-9999px;
@@ -72,9 +69,6 @@
  *   /&#42; this is required as of 1.3x to properly
  *      apply all styling in a show/hide animation &#42;/
  *   transition:0s linear all;
- *
- *   /&#42; this must be set as block so the animation is visible &#42;/
- *   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;
