Redraw via requestAnimationFrame if element has transition / animatio…

…n on it.

src/LiveDevelopment/Agents/RemoteFunctions.js

@@ -35,6 +35,19 @@ function RemoteFunctions(config) {
 
     var experimental = config.experimental;
     var lastKeepAliveTime = Date.now();
+	var req, timeout;
+	var animateHighlight = function (time) {
+		if(req) {
+			cancelAnimationFrame(req);	
+			clearTimeout(timeout);
+		}
+		req = requestAnimationFrame(redrawHighlights);
+
+		timeout = setTimeout(function () {
+			cancelAnimationFrame(req);	
+			req = null;
+		}, time * 1000);
+	};
 
     /**
      * @type {DOMEditHandler}
@@ -234,11 +247,18 @@ function RemoteFunctions(config) {
             }
             return false;
         },
-
         _makeHighlightDiv: function (element, doAnimation) {
             var elementBounds = element.getBoundingClientRect(),
                 highlight = window.document.createElement("div"),
                 styles = window.getComputedStyle(element);
+		var transitionDuration = parseFloat(styles.getPropertyValue('transition-duration'));
+
+		var animationDuration = parseFloat(styles.getPropertyValue('animation-duration'));
+
+		if (transitionDuration)
+			animateHighlight(transitionDuration);
+		if (animationDuration) 
+			animateHighlight(animationDuration);
 
             // Don't highlight elements with 0 width & height
             if (elementBounds.width === 0 && elementBounds.height === 0) {
@@ -433,7 +453,8 @@ function RemoteFunctions(config) {
                 "border-width": "1px",
                 "border-color": "#00a2ff",
                 "box-shadow": "0 0 1px #fff",
-                "box-sizing": "border-box"
+                "box-sizing": "border-box",
+				"transform": styles.getPropertyValue('transform')
             };
 
             var mergedStyles = Object.assign({}, stylesToSet,  config.remoteHighlight.stylesToSet);