refactor(accordion): use ngAnimate for animations

- Deprecate collapse module Consider removing it after transition module is deprecated as well. Fixes angular-ui#2871 Fixes angular-ui#3141 Closes angular-ui#1675
chrisirhc · Mar 21, 2015 · 603a4e7 · 603a4e7
1 parent 431b9c7
commit 603a4e7
Show file tree

Hide file tree

Showing 4 changed files with 67 additions and 5 deletions.
diff --git a/src/accordion/accordion.js b/src/accordion/accordion.js
@@ -1,4 +1,4 @@
-angular.module('ui.bootstrap.accordion', ['ui.bootstrap.collapse'])
+angular.module('ui.bootstrap.accordion', [])
 
 .constant('accordionConfig', {
   closeOthers: true
@@ -127,4 +127,63 @@ angular.module('ui.bootstrap.accordion', ['ui.bootstrap.collapse'])
       });
     }
   };
-});
+})
+
+/**
+ * Animations based on addition and removal of `in` class
+ * This requires the bootstrap classes to be present in order to take advantage
+ * of the animation classes.
+ */
+.animation('.panel-collapse', function () {
+  return {
+    beforeAddClass: function (element, className, done) {
+      if (className == 'in') {
+        element
+          .removeClass('collapse')
+          .addClass('collapsing')
+          ;
+      }
+      done();
+    },
+    addClass: function (element, className, done) {
+      if (className == 'in') {
+        element
+          .css({height: element[0].scrollHeight + 'px'})
+          .one('$animate:close', function closeFn() {
+            element
+              .removeClass('collapsing')
+              .css({height: 'auto'});
+          });
+      }
+      done();
+    },
+    beforeRemoveClass: function (element, className, done) {
+      if (className == 'in') {
+        element
+          // IMPORTANT: The height must be set before adding "collapsing" class.
+          // Otherwise, the browser attempts to animate from height 0 (in
+          // collapsing class) to the given height here.
+          .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')
+          .addClass('collapsing');
+      }
+      done();
+    },
+    removeClass: function (element, className, done) {
+      if (className == 'in') {
+        element
+          .css({height: '0'})
+          .one('$animate:close', function closeFn() {
+            element
+              .removeClass('collapsing')
+              .addClass('collapse');
+          });
+      }
+      done();
+    }
+  };
+})
+
+;
diff --git a/src/accordion/test/accordion.spec.js b/src/accordion/test/accordion.spec.js
@@ -265,8 +265,8 @@ describe('accordion', function () {
       });
 
       it('should have visible panel body when the group with isOpen set to true', function () {
-        expect(findGroupBody(0)[0].clientHeight).not.toBe(0);
-        expect(findGroupBody(1)[0].clientHeight).toBe(0);
+        expect(findGroupBody(0)).toHaveClass('in');
+        expect(findGroupBody(1)).not.toHaveClass('in');
       });
     });
 

diff --git a/src/collapse/collapse.js b/src/collapse/collapse.js
@@ -1,3 +1,6 @@
+/**
+ * @deprecated Switching over to using ngAnimate for animations
+ */
 angular.module('ui.bootstrap.collapse', ['ui.bootstrap.transition'])
 
   .directive('collapse', ['$transition', function ($transition) {

diff --git a/template/accordion/accordion-group.html b/template/accordion/accordion-group.html
@@ -4,7 +4,7 @@ <h4 class="panel-title">
       <a href="javascript:void(0)" tabindex="0" class="accordion-toggle" ng-click="toggleOpen()" accordion-transclude="heading"><span ng-class="{'text-muted': isDisabled}">{{heading}}</span></a>
     </h4>
   </div>
-  <div class="panel-collapse" collapse="!isOpen">
+  <div class="panel-collapse collapse" ng-class="{in: isOpen}">
 	  <div class="panel-body" ng-transclude></div>
   </div>
 </div>