diff --git a/src/transition/test/transition.spec.js b/src/transition/test/transition.spec.js index 34f744b037..2531fcf52e 100644 --- a/src/transition/test/transition.spec.js +++ b/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('
'); + 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('
'); + 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('
'); + 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('
'); + 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('
'); 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('
'); + 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('
'); 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('
'); + 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() { diff --git a/src/transition/transition.js b/src/transition/transition.js index c23d3f76f7..3dd485a5ea 100644 --- a/src/transition/transition.js +++ b/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 ) {