From 32d5de4ce5936aa6b02db95184fcbc4b45bce194 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Matias=20Niemel=C3=A4?= Date: Thu, 22 May 2014 23:33:53 -0500 Subject: [PATCH] fix($animate): retain inline styles for property-specific transition animations Closes #7503 --- src/ngAnimate/animate.js | 2 +- test/ngAnimate/animateSpec.js | 20 ++++++++++++++++++++ 2 files changed, 21 insertions(+), 1 deletion(-) diff --git a/src/ngAnimate/animate.js b/src/ngAnimate/animate.js index e55977d53dbe..77c542e4c1c9 100644 --- a/src/ngAnimate/animate.js +++ b/src/ngAnimate/animate.js @@ -1433,7 +1433,7 @@ angular.module('ngAnimate', ['ng']) //the jqLite object, so we're safe to use a single variable to house //the styles since there is always only one element being animated var oldStyle = node.getAttribute('style') || ''; - node.setAttribute('style', oldStyle + ' ' + style); + node.setAttribute('style', oldStyle + '; ' + style); } var startTime = Date.now(); diff --git a/test/ngAnimate/animateSpec.js b/test/ngAnimate/animateSpec.js index 2034744fe03c..34e536c38e58 100644 --- a/test/ngAnimate/animateSpec.js +++ b/test/ngAnimate/animateSpec.js @@ -1167,6 +1167,26 @@ describe("ngAnimate", function() { expect(element.css('width')).toBe("200px"); })); + it("should NOT overwrite styles when a transition with a specific property is used", + inject(function($animate, $rootScope, $compile, $sniffer, $timeout) { + + if(!$sniffer.transitions) return; + + var style = '-webkit-transition: border linear .2s;' + + 'transition: border linear .2s;'; + + ss.addRule('.on', style); + element = $compile(html('
'))($rootScope); + $animate.addClass(element, 'on'); + + $animate.triggerReflow(); + + var now = Date.now(); + browserTrigger(element,'transitionend', { timeStamp: now + 1000, elapsedTime: 1 }); + browserTrigger(element,'transitionend', { timeStamp: now + 2000, elapsedTime: 2 }); + expect(element.css('height')).toBe("200px"); + })); + it("should animate for the highest duration", inject(function($animate, $rootScope, $compile, $sniffer, $timeout) {