Expand $transition API a bit

src/transition/test/transition.spec.js

@@ -37,6 +37,41 @@ describe('$transition', function() {
     expect(element.addClass).toHaveBeenCalledWith('triggerClass');
   });
 
+  it('remove the css class if passed a string starting with `-`', function() {
+    var element = angular.element('<div class="foo"></div>');
+    spyOn(element, 'removeClass');
+    $transition(element, '-foo');
+    $timeout.flush();
+
+    expect(element.removeClass).toHaveBeenCalledWith('foo');
+  });
+
+  it('toggle (removeClass) the css class if passed a string starting with `^`', function() {
+    var element = angular.element('<div class="foo"></div>');
+    spyOn(element, 'removeClass');
+    $transition(element, '^foo');
+    $timeout.flush();
+    expect(element.removeClass).toHaveBeenCalledWith('foo');
+  });
+
+  it('toggle (addClass) the css class if passed a string starting with `^`', function() {
+    var element = angular.element('<div></div>');
+    spyOn(element, 'addClass');
+    $transition(element, '^foo');
+    $timeout.flush();
+    expect(element.addClass).toHaveBeenCalledWith('foo');
+  });
+
+  it('changes the css if passed array of strings', function() {
+    var element = angular.element('<div></div>');
+    spyOn(element, 'addClass');
+    $transition(element, ['triggerClass', 'triggerClass2']);
+    $timeout.flush();
+
+    expect(element.addClass).toHaveBeenCalledWith('triggerClass');
+    expect(element.addClass).toHaveBeenCalledWith('triggerClass2');
+  });
+
   it('changes the style if passed an object', function() {
     var element = angular.element('<div></div>');
     var triggerStyle = { height: '11px' };
@@ -46,6 +81,17 @@ describe('$transition', function() {
     expect(element.css).toHaveBeenCalledWith(triggerStyle);
   });
 
+  it('changes the style and css if passed an object and string', function() {
+    var element = angular.element('<div></div>');
+    var triggerStyle = [{ height: '11px' }, 'triggerClass'];
+    spyOn(element, 'css');
+    spyOn(element, 'addClass');
+    $transition(element, triggerStyle);
+    $timeout.flush();
+    expect(element.css).toHaveBeenCalledWith(triggerStyle[0]);
+    expect(element.addClass).toHaveBeenCalledWith(triggerStyle[1]);
+  });
+
   it('calls the function if passed', function() {
     var element = angular.element('<div></div>');
     var triggerFunction = jasmine.createSpy('triggerFunction');
@@ -54,6 +100,17 @@ describe('$transition', function() {
     expect(triggerFunction).toHaveBeenCalledWith(element);
   });
 
+  it('calls the function and changes the css if passed a function and string', function() {
+    var element = angular.element('<div></div>');
+    var triggerFunction = jasmine.createSpy('triggerFunction');
+    spyOn(element, 'addClass');
+    var trigger = [triggerFunction, 'triggerClass'];
+    $transition(element, trigger);
+    $timeout.flush();
+    expect(triggerFunction).toHaveBeenCalledWith(element);
+    expect(element.addClass).toHaveBeenCalledWith('triggerClass');
+  });
+
   // Versions of Internet Explorer before version 10 do not have CSS transitions
   if ( !ie  || ie > 9 ) {
     describe('transitionEnd event', function() {

src/transition/transition.js

@@ -29,12 +29,30 @@ angular.module('ui.bootstrap.transition', [])
 
     // Wrap in a timeout to allow the browser time to update the DOM before the transition is to occur
     $timeout(function() {
-      if ( angular.isString(trigger) ) {
-        element.addClass(trigger);
-      } else if ( angular.isFunction(trigger) ) {
-        trigger(element);
-      } else if ( angular.isObject(trigger) ) {
-        element.css(trigger);
+      var handleTrigger = function(trigger) {
+        if ( angular.isString(trigger) ) {
+          // Additional CSS class semantics
+          if ( trigger.indexOf('-') === 0 ) {
+            element.removeClass(trigger.substr(1));
+          } else if ( trigger.indexOf('^') === 0 ) {
+            var cls = trigger.substr(1);
+            element[element.hasClass(cls) ? 'removeClass' : 'addClass'](cls);
+          } else {
+            if(trigger.indexOf('+') === 0) {
+              trigger = trigger.substr(1);
+            }
+            element.addClass(trigger);
+          }
+        } else if ( angular.isFunction(trigger) ) {
+          trigger(element);
+        } else if ( angular.isObject(trigger) ) {
+          element.css(trigger);
+        }
+      };
+      if(angular.isArray(trigger)) {
+        angular.forEach(trigger, handleTrigger);
+      } else {
+        handleTrigger(trigger);
       }
       //If browser does not support transitions, instantly resolve
       if ( !endEventName ) {