fix($animate): retain inline styles for property-specific transitions

Transitions that are run through ngAnimate which contain a specific property
cause any inline styles to be erased after the animation is done. This has
something to do with how the browsers handle transitions that do not use
"all" as a transition property.

Closes #7503

Author: matsko

src/ngAnimate/animate.js

@@ -1368,7 +1368,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);
         }
 
         element.on(css3AnimationEvents, onAnimationProgress);

test/ngAnimate/animateSpec.js

@@ -1153,6 +1153,25 @@ 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('<div style="height:200px"></div>'))($rootScope);
+            $animate.addClass(element, 'on');
+
+            $animate.triggerReflow();
+
+            var now = Date.now();
+            browserTrigger(element,'transitionend', { timeStamp: now + 200, elapsedTime: 0.2 });
+            expect(element.css('height')).toBe("200px");
+          }));
+
 
           it("should animate for the highest duration",
             inject(function($animate, $rootScope, $compile, $sniffer, $timeout) {