diff --git a/src/collapse/collapse.js b/src/collapse/collapse.js
index 1b0044c35a..cff5efe115 100644
--- a/src/collapse/collapse.js
+++ b/src/collapse/collapse.js
@@ -12,20 +12,19 @@ angular.module('ui.bootstrap.collapse', [])
 
           if ($animateCss) {
             $animateCss(element, {
-              addClass: 'in',
               easing: 'ease',
               to: { height: element[0].scrollHeight + 'px' }
             }).start().done(expandDone);
           } else {
-            $animate.addClass(element, 'in', {
-              to: { height: element[0].scrollHeight + 'px' }
+            $animate.animate(element, {}, {
+              height: element[0].scrollHeight + 'px'
             }).then(expandDone);
           }
         }
 
         function expandDone() {
           element.removeClass('collapsing')
-            .addClass('collapse')
+            .addClass('collapse in')
             .css({height: 'auto'});
         }
 
@@ -41,19 +40,18 @@ angular.module('ui.bootstrap.collapse', [])
             .css({height: element[0].scrollHeight + 'px'})
             // initially all panel collapse have the collapse class, this removal
             // prevents the animation from jumping to collapsed state
-            .removeClass('collapse')
+            .removeClass('collapse in')
             .addClass('collapsing')
             .attr('aria-expanded', false)
             .attr('aria-hidden', true);
 
           if ($animateCss) {
             $animateCss(element, {
-              removeClass: 'in',
               to: {height: '0'}
             }).start().done(collapseDone);
           } else {
-            $animate.removeClass(element, 'in', {
-              to: {height: '0'}
+            $animate.animate(element, {}, {
+              height: '0'
             }).then(collapseDone);
           }
         }
diff --git a/src/collapse/test/collapse.spec.js b/src/collapse/test/collapse.spec.js
index 60547367b4..5083904493 100644
--- a/src/collapse/test/collapse.spec.js
+++ b/src/collapse/test/collapse.spec.js
@@ -111,9 +111,9 @@ describe('collapse directive', function() {
       scope.exp = false;
       scope.isCollapsed = false;
       scope.$digest();
+      $animate.flush();
       var collapseHeight = element.height();
       scope.exp = true;
-      $animate.flush();
       scope.$digest();
       expect(element.height()).toBeGreaterThan(collapseHeight);
     });
@@ -122,6 +122,7 @@ describe('collapse directive', function() {
       scope.exp = true;
       scope.isCollapsed = false;
       scope.$digest();
+      $animate.flush();
       var collapseHeight = element.height();
       scope.exp = false;
       scope.$digest();