Add start and end events for collapse and expand transitions.

src/collapse/collapse.js

@@ -26,6 +26,7 @@ angular.module('ui.bootstrap.collapse', ['ui.bootstrap.transition'])
         }
 
         function expand() {
+          scope.$emit('expand.start');
           if (initialAnimSkip) {
             initialAnimSkip = false;
             expandDone();
@@ -39,9 +40,11 @@ angular.module('ui.bootstrap.collapse', ['ui.bootstrap.transition'])
           element.removeClass('collapsing');
           element.addClass('collapse in');
           element.css({height: 'auto'});
+          scope.$emit('expand.end');
         }
 
         function collapse() {
+          scope.$emit('collapse.start');
           if (initialAnimSkip) {
             initialAnimSkip = false;
             collapseDone();
@@ -61,6 +64,7 @@ angular.module('ui.bootstrap.collapse', ['ui.bootstrap.transition'])
         function collapseDone() {
           element.removeClass('collapsing');
           element.addClass('collapse');
+          scope.$emit('collapse.end');
         }
 
         scope.$watch(attrs.collapse, function (shouldCollapse) {

src/collapse/test/collapse.spec.js

@@ -71,6 +71,34 @@ describe('collapse directive', function () {
     }
   });
 
+  it('should emit start and end events for the collapse transition', function() {
+    scope.isCollapsed = false;
+    scope.$digest();
+    spyOn(scope, '$emit');
+    scope.isCollapsed = true;
+    scope.$digest();
+    $timeout.flush();
+    expect(scope.$emit).toHaveBeenCalledWith('collapse.start');
+    if ($transition.transitionEndEventName) {
+      element.triggerHandler($transition.transitionEndEventName);
+    }
+    expect(scope.$emit).toHaveBeenCalledWith('collapse.end');
+  });
+
+  it('should emit start and end events for the expand transition', function() {
+    scope.isCollapsed = true;
+    scope.$digest();
+    spyOn(scope, '$emit');
+    scope.isCollapsed = false;
+    scope.$digest();
+    $timeout.flush();
+    expect(scope.$emit).toHaveBeenCalledWith('expand.start');
+    if ($transition.transitionEndEventName) {
+      element.triggerHandler($transition.transitionEndEventName);
+    }
+    expect(scope.$emit).toHaveBeenCalledWith('expand.end');
+  });
+
   describe('dynamic content', function() {
 
     var element;