diff --git a/src/jqLite.js b/src/jqLite.js index ec6ca09e9717..054eba65c3a4 100644 --- a/src/jqLite.js +++ b/src/jqLite.js @@ -337,30 +337,58 @@ function jqLiteHasClass(element, selector) { } function jqLiteRemoveClass(element, cssClasses) { - if (cssClasses && element.setAttribute) { - forEach(cssClasses.split(' '), function(cssClass) { - element.setAttribute('class', trim( - (" " + (element.getAttribute('class') || '') + " ") - .replace(/[\n\t]/g, " ") - .replace(" " + trim(cssClass) + " ", " ")) - ); - }); + if (cssClasses) { + + // if browser and element support classList api use it + if (element.classList) { + cssClasses = trim(cssClasses); + if (cssClasses) { + cssClasses = cssClasses.split(/\s+/); + if (cssClasses.length === 1) { + element.classList.remove(cssClasses[0]); + } else { + element.classList.remove.apply(element.classList, cssClasses); + } + } + } else if (element.setAttribute) { + forEach(cssClasses.split(' '), function(cssClass) { + element.setAttribute('class', trim( + (" " + (element.getAttribute('class') || '') + " ") + .replace(/[\n\t]/g, " ") + .replace(" " + trim(cssClass) + " ", " ")) + ); + }); + } } } function jqLiteAddClass(element, cssClasses) { - if (cssClasses && element.setAttribute) { - var existingClasses = (' ' + (element.getAttribute('class') || '') + ' ') - .replace(/[\n\t]/g, " "); - - forEach(cssClasses.split(' '), function(cssClass) { - cssClass = trim(cssClass); - if (existingClasses.indexOf(' ' + cssClass + ' ') === -1) { - existingClasses += cssClass + ' '; + if (cssClasses) { + + // if browser and element support classList api use it + if (element.classList) { + cssClasses = trim(cssClasses); + if (cssClasses) { + cssClasses = cssClasses.split(/\s+/); + if (cssClasses.length === 1) { + element.classList.add(cssClasses[0]); + } else { + element.classList.add.apply(element.classList, cssClasses); + } } - }); + } else if (element.setAttribute) { + var existingClasses = (' ' + (element.getAttribute('class') || '') + ' ') + .replace(/[\n\t]/g, " "); + + forEach(cssClasses.split(' '), function (cssClass) { + cssClass = trim(cssClass); + if (existingClasses.indexOf(' ' + cssClass + ' ') === -1) { + existingClasses += cssClass + ' '; + } + }); - element.setAttribute('class', trim(existingClasses)); + element.setAttribute('class', trim(existingClasses)); + } } } diff --git a/test/ngAnimate/animateSpec.js b/test/ngAnimate/animateSpec.js index 56fcd7f5968c..21fc9317652e 100644 --- a/test/ngAnimate/animateSpec.js +++ b/test/ngAnimate/animateSpec.js @@ -3532,6 +3532,15 @@ describe("ngAnimate", function() { } node._setAttribute(prop, val); }; + node._classListAdd = node.classList.add; + node.classList.add = function(cssClass) { + if (cssClass === 'trigger-class') { + var propertyKey = ($sniffer.vendorPrefix == 'Webkit' ? '-webkit-' : '') + 'transition-property'; + capturedProperty = element.css(propertyKey); + } + + return node._classListAdd.apply(node.classList, arguments); + }; expect(capturedProperty).toBe('none'); $animate.addClass(element, 'trigger-class');