feat(transition): Add transition service

src/transition/test/transition.spec.js

@@ -0,0 +1,54 @@
+describe('$transition', function() {
+  var $transition;
+
+  beforeEach(module('ui.bootstrap.transition'));
+
+  beforeEach(inject(function(_$transition_) {
+    $transition = _$transition_;
+  }));
+
+  it('returns a promise', function() {
+    var element = angular.element('<div></div>');
+    expect($transition(element, '').then).toBeDefined();
+  });
+
+  it('changes the css if passed a string', function() {
+    var element = angular.element('<div></div>');
+    spyOn(element, 'addClass');
+    $transition(element, 'triggerClass');
+    expect(element.addClass).toHaveBeenCalledWith('triggerClass');
+  });
+
+  it('changes the style if passed an object', function() {
+    var element = angular.element('<div></div>');
+    var triggerStyle = { height: '11px' };
+    spyOn(element, 'css');
+    $transition(element, triggerStyle);
+    expect(element.css).toHaveBeenCalledWith(triggerStyle);
+  });
+
+  it('calls the function if passed', function() {
+    var element = angular.element('<div></div>');
+    var triggerFunction = jasmine.createSpy('triggerFunction');
+    $transition(element, triggerFunction);
+    expect(triggerFunction).toHaveBeenCalledWith(element);
+  });
+
+  it('binds a transitionEnd handler to the element', function() {
+    var element = angular.element('<div></div>');
+    spyOn(element, 'bind');
+    $transition(element, '');
+    expect(element.bind).toHaveBeenCalledWith($transition.transitionEndEventName, jasmine.any(Function));
+  });
+
+
+  describe('transitionEndEventName', function() {
+    it('should be a string if it is defined', function() {
+      if ( $transition.transitionEndEventName ) {
+        expect($transition.transitionEndEventName).toMatch(/transitionend$/i);
+      }
+    });
+  });
+
+});
+

src/transition/transition.js

@@ -0,0 +1,40 @@
+angular.module('ui.bootstrap.transition', [])
+
+.factory('$transition', ['$q', function($q) {
+
+  var $transition = function(element, trigger) {
+    if ( !$transition.transitionEndEventName ) {
+      return;
+    }
+    var deferred = $q.defer();
+    var transitionEndHandler = function(event) {
+      element.unbind($transition.transitionEndEventName, transitionEndHandler);
+      deferred.resolve(element);
+    };
+    element.bind($transition.transitionEndEventName, transitionEndHandler);
+    if ( angular.isString(trigger) ) {
+      element.addClass(trigger);
+    } else if ( angular.isFunction(trigger) ) {
+      trigger(element);
+    } else if ( angular.isObject(trigger) ) {
+      element.css(trigger);
+    }
+    return deferred.promise;
+  };
+
+  // Work out the name of the transitionEnd event
+  var transElement = document.createElement('trans');
+  var transitionEndEventNames = {
+    'WebkitTransition': 'webkitTransitionEnd',
+    'MozTransition': 'transitionend',
+    'OTransition': 'oTransitionEnd',
+    'msTransition': 'MSTransitionEnd',
+    'transition': 'transitionend'
+  };
+  for (var name in transitionEndEventNames){
+    if (transElement.style[name] !== undefined) {
+      $transition.transitionEndEventName = transitionEndEventNames[name];
+    }
+  }
+  return $transition;
+}]);