#184 ui fixes

Author: Michael Mrowetz

Diff for: src/css-raw/perf-cascade.css

@@ -6,8 +6,11 @@
 
 .water-fall-chart .left-fixed-holder {overflow: visible;}
 .water-fall-chart .marker-holder {width:100%;}
-.water-fall-chart .line-holder {stroke-width:1; stroke: #ccc; stroke-opacity:0.5;}
+.water-fall-chart .line-label-holder {cursor: pointer;}
+.water-fall-chart .line-holder {stroke-width:1; stroke: #ccc; stroke-opacity:0.5; transition: all 60ms;}
+.water-fall-chart .line-holder .line-mark {fill: #69009e; opacity: 0.01; stroke-width: 0; transition: all 60ms;}
 .water-fall-chart .line-holder.active {stroke: #69009e; stroke-width:2; stroke-opacity:1;}
+.water-fall-chart .line-holder.active .line-mark { opacity: 0.4;}
 .water-fall-chart .type-onload .line-holder  {stroke: #c0c0ff;}
 .water-fall-chart .type-oncontentload .line-holder  {stroke: #d888df;}
 
@@ -19,10 +22,6 @@
 .water-fall-chart .line-end.active,
 .water-fall-chart .line-start.active {display: block;}
 
-.water-fall-chart .line-mark {fill: #0aa; opacity: 0.01; stroke-width: 0;}
-.water-fall-chart .line-holder.active .line-mark { opacity: 0.5;}
-.water-fall-chart .line-label-holder {cursor: pointer;}
-
 .water-fall-chart .mark-holder text {writing-mode:vertical-lr;}
 
 .left-fixed-holder .label-full-bg {fill: #fff; opacity: 0.9}

Diff for: src/ts/waterfall/sub-components/svg-marks.ts

@@ -70,10 +70,15 @@ export function createMarks(context: Context, marks: Mark[]) {
     let isClickActive = false;
     let onLabelMouseEnter = () => {
       if (!isHoverActive) {
-        isHoverActive = true;
-        addClass(lineHolder, "active");
-        // firefox has issues with this
+        // move marker to top
         markHolder.parentNode.appendChild(markHolder);
+        isHoverActive = true;
+        // assign class later to not break animation with DOM re-order
+        if (typeof window.requestAnimationFrame === "function") {
+          window.requestAnimationFrame(() => addClass(lineHolder, "active"));
+        } else {
+          addClass(lineHolder, "active");
+        }
       }
     };