fix(collapsible): Fixed #94 by skipping any transitions on initialization

Author: SidhNor

src/collapse/collapse.js

@@ -21,7 +21,7 @@ angular.module('ui.bootstrap.collapse',['ui.bootstrap.transition'])
     link: function(scope, element, attrs) {
 
       var isCollapsed;
-
+      var initialAnimSkip = true;
       scope.$watch(function (){ return element[0].scrollHeight; }, function (value) {
         //The listener is called when scollHeight changes
         //It actually does on 2 scenarios: 
@@ -30,7 +30,7 @@ angular.module('ui.bootstrap.collapse',['ui.bootstrap.transition'])
         //When we have a change of scrollHeight we are setting again the correct height if the group is opened
         if (element[0].scrollHeight !== 0) {
           if (!isCollapsed) {
-            doTransition({ height : element[0].scrollHeight + 'px' });
+            fixUpHeight(scope, element, element[0].scrollHeight + 'px');
           }
         }
       });
@@ -58,21 +58,33 @@ angular.module('ui.bootstrap.collapse',['ui.bootstrap.transition'])
       };
 
       var expand = function() {
-        doTransition({ height : element[0].scrollHeight + 'px' })
-        .then(function() {
-          // This check ensures that we don't accidentally update the height if the user has closed
-          // the group while the animation was still running
+        if (initialAnimSkip) {
+          initialAnimSkip = false;
           if ( !isCollapsed ) {
             fixUpHeight(scope, element, 'auto');
           }
-        });
+        } else {
+          doTransition({ height : element[0].scrollHeight + 'px' })
+          .then(function() {
+            // This check ensures that we don't accidentally update the height if the user has closed
+            // the group while the animation was still running
+            if ( !isCollapsed ) {
+              fixUpHeight(scope, element, 'auto');
+            }
+          });
+        }
         isCollapsed = false;
       };
 
       var collapse = function() {
         isCollapsed = true;
-        fixUpHeight(scope, element, element[0].scrollHeight + 'px');
-        doTransition({'height':'0'});
+        if (initialAnimSkip) {
+          initialAnimSkip = false;
+          fixUpHeight(scope, element, 0);
+        } else {
+          fixUpHeight(scope, element, element[0].scrollHeight + 'px');
+          doTransition({'height':'0'});
+        }
       };
     }
   };

src/collapse/test/collapse.spec.js

@@ -17,17 +17,35 @@ describe('collapse directive', function () {
     angular.element(document.body).append(element);
   });
 
-  it('should collapse if isCollapsed = true', function() {
+  it('should be hidden on initialization if isCollapsed = true without transition', function() {
+    scope.isCollapsed = true;
+    scope.$digest();
+    //No animation timeout here
+    expect(element.height()).toBe(0);
+  });
+
+  it('should collapse if isCollapsed = true with animation on subsequent use', function() {
+    scope.isCollapsed = false;
+    scope.$digest();
     scope.isCollapsed = true;
     scope.$digest();
     $timeout.flush();
     expect(element.height()).toBe(0);
   });
 
-  it('should expand if isCollapsed = false', function() {
+  it('should be shown on initialization if isCollapsed = false without transition', function() {
+    scope.isCollapsed = false;
+    scope.$digest();
+    //No animation timeout here
+    expect(element.height()).not.toBe(0);
+  });
+
+  it('should expand if isCollapsed = false on subsequent use', function() {
+    scope.isCollapsed = true;
+    scope.$digest();
     scope.isCollapsed = false;
     scope.$digest();
     $timeout.flush();
     expect(element.height()).not.toBe(0);
-  });    
+  });
 });