fix(transition): Wrap style changes in a $timeout and fix IE9 handling

kevbo · Dec 17, 2012 · ce6c5f2 · ce6c5f2
1 parent 1455507
commit ce6c5f2
Show file tree

Hide file tree

Showing 2 changed files with 69 additions and 25 deletions.
diff --git a/src/transition/test/transition.spec.js b/src/transition/test/transition.spec.js
@@ -1,10 +1,24 @@
+
 describe('$transition', function() {
-  var $transition;
+
+  // Work out if we are running IE
+  var ie = (function(){
+      var v = 3,
+          div = document.createElement('div'),
+          all = div.getElementsByTagName('i');
+      do {
+        div.innerHTML = '<!--[if gt IE ' + (++v) + ']><i></i><![endif]-->';
+      } while(all[0]);
+      return v > 4 ? v : undefined;
+  }());
+
+  var $transition, $timeout;
 
   beforeEach(module('ui.bootstrap.transition'));
 
-  beforeEach(inject(function(_$transition_) {
+  beforeEach(inject(function(_$transition_, _$timeout_) {
     $transition = _$transition_;
+    $timeout = _$timeout_;
   }));
 
   it('returns a promise', function() {
@@ -16,6 +30,8 @@ describe('$transition', function() {
     var element = angular.element('<div></div>');
     spyOn(element, 'addClass');
     $transition(element, 'triggerClass');
+    $timeout.flush();
+
     expect(element.addClass).toHaveBeenCalledWith('triggerClass');
   });
 
@@ -24,31 +40,49 @@ describe('$transition', function() {
     var triggerStyle = { height: '11px' };
     spyOn(element, 'css');
     $transition(element, triggerStyle);
+    $timeout.flush();
     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);
+    $timeout.flush();
     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));
-  });
-
+  // Versions of Internet Explorer before version 10 do not have CSS transitions
+  if ( !ie  || ie > 9 ) {
 
-  describe('transitionEndEventName', function() {
-    it('should be a string if it is defined', function() {
-      if ( $transition.transitionEndEventName ) {
+    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 ending with transitionend', function() {
         expect($transition.transitionEndEventName).toMatch(/transitionend$/i);
-      }
+      });
+    });
+
+  } else {
+
+    it('does not bind a transitionEnd handler to the element', function() {
+      var element = angular.element('<div></div>');
+      spyOn(element, 'bind');
+      $transition(element, '');
+      expect(element.bind).not.toHaveBeenCalledWith($transition.transitionEndEventName, jasmine.any(Function));
+    });
+
+    describe('transitionEndEventName', function() {
+      it('should be undefined', function() {
+        expect($transition.transitionEndEventName).not.toBeDefined();
+      });
     });
-  });
 
+  }
 });
 
diff --git a/src/transition/transition.js b/src/transition/transition.js
@@ -1,24 +1,34 @@
 angular.module('ui.bootstrap.transition', [])
 
-.factory('$transition', ['$q', function($q) {
+.factory('$transition', ['$q', '$timeout', function($q, $timeout) {
 
   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);
+
+
+    if ( $transition.transitionEndEventName ) {
+      element.bind($transition.transitionEndEventName, transitionEndHandler);
     }
+
+    $timeout(function() {
+      if ( angular.isString(trigger) ) {
+        element.addClass(trigger);
+      } else if ( angular.isFunction(trigger) ) {
+        trigger(element);
+      } else if ( angular.isObject(trigger) ) {
+        element.css(trigger);
+      }
+
+      if ( !$transition.transitionEndEventName ) {
+        deferred.resolve(element);
+      }
+    });
+
     return deferred.promise;
   };