fix(ngStyle): skip setting empty value when new style has the property

Previously, all the properties in oldStyles are set to empty value once.
Using AngularJS with jQuery 3.3.1, this disables the CSS transition as
reported in jquery/jquery#4185.

Closes #16709
This commit is contained in:
itchyny
2018-10-04 23:46:41 +09:00
committed by Michał Gołębiowski-Owczarek
parent c903b76f6c
commit d6098eeb1c
2 changed files with 41 additions and 1 deletions
+8 -1
View File
@@ -54,7 +54,14 @@
var ngStyleDirective = ngDirective(function(scope, element, attr) {
scope.$watchCollection(attr.ngStyle, function ngStyleWatchAction(newStyles, oldStyles) {
if (oldStyles && (newStyles !== oldStyles)) {
forEach(oldStyles, function(val, style) { element.css(style, '');});
if (!newStyles) {
newStyles = {};
}
forEach(oldStyles, function(val, style) {
if (newStyles[style] == null) {
newStyles[style] = '';
}
});
}
if (newStyles) element.css(newStyles);
});
+33
View File
@@ -120,5 +120,38 @@ describe('ngStyle', function() {
expect(element.css(preCompStyle)).not.toBe('88px');
expect(element.css(postCompStyle)).not.toBe('99px');
});
it('should clear style when the new model is null', function() {
scope.styleObj = {'height': '99px', 'width': '88px'};
scope.$apply();
expect(element.css(preCompStyle)).toBe('88px');
expect(element.css(postCompStyle)).toBe('99px');
scope.styleObj = null;
scope.$apply();
expect(element.css(preCompStyle)).not.toBe('88px');
expect(element.css(postCompStyle)).not.toBe('99px');
});
it('should clear style when the value is undefined or null', function() {
scope.styleObj = {'height': '99px', 'width': '88px'};
scope.$apply();
expect(element.css(preCompStyle)).toBe('88px');
expect(element.css(postCompStyle)).toBe('99px');
scope.styleObj = {'height': undefined, 'width': null};
scope.$apply();
expect(element.css(preCompStyle)).not.toBe('88px');
expect(element.css(postCompStyle)).not.toBe('99px');
});
it('should set style when the value is zero', function() {
scope.styleObj = {'height': '99px', 'width': '88px'};
scope.$apply();
expect(element.css(preCompStyle)).toBe('88px');
expect(element.css(postCompStyle)).toBe('99px');
scope.styleObj = {'height': 0, 'width': 0};
scope.$apply();
expect(element.css(preCompStyle)).toBe('0px');
expect(element.css(postCompStyle)).toBe('0px');
});
});
});