feat(collapse): convert to use $animateCss

- Change to use `$animateCss` when available Closes #4257
angular-ui · Sep 4, 2015 · 533a9f0 · 533a9f0
1 parent 0a69580
commit 533a9f0
Show file tree

Hide file tree

Showing 3 changed files with 48 additions and 16 deletions.
diff --git a/src/accordion/test/accordion.spec.js b/src/accordion/test/accordion.spec.js
@@ -1,12 +1,14 @@
 describe('accordion', function() {
-  var $scope;
+  var $animate, $scope;
 
   beforeEach(module('ui.bootstrap.accordion'));
   beforeEach(module('ui.bootstrap.collapse'));
+  beforeEach(module('ngAnimateMock'));
   beforeEach(module('template/accordion/accordion.html'));
   beforeEach(module('template/accordion/accordion-group.html'));
 
-  beforeEach(inject(function($rootScope) {
+  beforeEach(inject(function(_$animate_, $rootScope) {
+    $animate = _$animate_;
     $scope = $rootScope;
   }));
 
@@ -358,6 +360,7 @@ describe('accordion', function() {
         angular.element(document.body).append(element);
         $compile(element)(scope);
         scope.$digest();
+        $animate.flush();
         groups = element.find('.panel');
       });
 

diff --git a/src/collapse/collapse.js b/src/collapse/collapse.js
@@ -1,6 +1,7 @@
 angular.module('ui.bootstrap.collapse', [])
 
-  .directive('collapse', ['$animate', function($animate) {
+  .directive('collapse', ['$animate', '$injector', function($animate, $injector) {
+    var $animateCss = $injector.has('$animateCss') ? $injector.get('$animateCss') : null;
     return {
       link: function(scope, element, attrs) {
         function expand() {
@@ -9,14 +10,23 @@ angular.module('ui.bootstrap.collapse', [])
             .attr('aria-expanded', true)
             .attr('aria-hidden', false);
 
-          $animate.addClass(element, 'in', {
-            to: { height: element[0].scrollHeight + 'px' }
-          }).then(expandDone);
+          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' }
+            }).then(expandDone);
+          }
         }
 
         function expandDone() {
-          element.removeClass('collapsing');
-          element.css({height: 'auto'});
+          element.removeClass('collapsing')
+            .addClass('collapse')
+            .css({height: 'auto'});
         }
 
         function collapse() {
@@ -36,15 +46,22 @@ angular.module('ui.bootstrap.collapse', [])
             .attr('aria-expanded', false)
             .attr('aria-hidden', true);
 
-          $animate.removeClass(element, 'in', {
-            to: {height: '0'}
-          }).then(collapseDone);
+          if ($animateCss) {
+            $animateCss(element, {
+              removeClass: 'in',
+              to: {height: '0'}
+            }).start().done(collapseDone);
+          } else {
+            $animate.removeClass(element, 'in', {
+              to: {height: '0'}
+            }).then(collapseDone);
+          }
         }
 
         function collapseDone() {
           element.css({height: '0'}); // Required so that collapse works when animation is disabled
-          element.removeClass('collapsing');
-          element.addClass('collapse');
+          element.removeClass('collapsing')
+            .addClass('collapse');
         }
 
         scope.$watch(attrs.collapse, function(shouldCollapse) {

diff --git a/src/collapse/test/collapse.spec.js b/src/collapse/test/collapse.spec.js
@@ -28,56 +28,70 @@ describe('collapse directive', function() {
   it('should collapse if isCollapsed = true with animation on subsequent use', function() {
     scope.isCollapsed = false;
     scope.$digest();
+    $animate.flush();
     scope.isCollapsed = true;
     scope.$digest();
+    $animate.flush();
     expect(element.height()).toBe(0);
   });
 
   it('should be shown on initialization if isCollapsed = false without transition', function() {
     scope.isCollapsed = false;
     scope.$digest();
+    $animate.flush();
     expect(element.height()).not.toBe(0);
   });
 
   it('should expand if isCollapsed = false with animation on subsequent use', function() {
     scope.isCollapsed = false;
     scope.$digest();
+    $animate.flush();
     scope.isCollapsed = true;
     scope.$digest();
+    $animate.flush();
     scope.isCollapsed = false;
     scope.$digest();
+    $animate.flush();
     expect(element.height()).not.toBe(0);
   });
 
   it('should expand if isCollapsed = true with animation on subsequent uses', function() {
     scope.isCollapsed = false;
     scope.$digest();
+    $animate.flush();
     scope.isCollapsed = true;
     scope.$digest();
+    $animate.flush();
     scope.isCollapsed = false;
     scope.$digest();
+    $animate.flush();
     scope.isCollapsed = true;
     scope.$digest();
+    $animate.flush();
     expect(element.height()).toBe(0);
   });
 
   it('should change aria-expanded attribute', function() {
     scope.isCollapsed = false;
     scope.$digest();
+    $animate.flush();
     expect(element.attr('aria-expanded')).toBe('true');
 
     scope.isCollapsed = true;
     scope.$digest();
+    $animate.flush();
     expect(element.attr('aria-expanded')).toBe('false');
   });
 
   it('should change aria-hidden attribute', function() {
     scope.isCollapsed = false;
     scope.$digest();
+    $animate.flush();
     expect(element.attr('aria-hidden')).toBe('false');
 
     scope.isCollapsed = true;
     scope.$digest();
+    $animate.flush();
     expect(element.attr('aria-hidden')).toBe('true');
   });
 
@@ -98,10 +112,9 @@ describe('collapse directive', function() {
       scope.exp = false;
       scope.isCollapsed = false;
       scope.$digest();
-      $animate.flush();
-      scope.$digest();
       var collapseHeight = element.height();
       scope.exp = true;
+      $animate.flush();
       scope.$digest();
       expect(element.height()).toBeGreaterThan(collapseHeight);
     });
@@ -110,7 +123,6 @@ describe('collapse directive', function() {
       scope.exp = true;
       scope.isCollapsed = false;
       scope.$digest();
-      $animate.flush();
       var collapseHeight = element.height();
       scope.exp = false;
       scope.$digest();