Merge pull request #189 from micmro/185

#185 add overlay opening animation

Author: micmro

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

@@ -24,13 +24,13 @@
 
 .water-fall-chart .mark-holder text {writing-mode:vertical-lr;}
 
-.left-fixed-holder .label-full-bg {fill: #fff; opacity: 0.9}
+.left-fixed-holder .label-full-bg {fill: #fff; opacity: 0.9;}
 
 .time-scale line {stroke:#0cc; stroke-width:1;}
 .time-scale line.sub-second-line {stroke: #ccc; opacity: 0.75; stroke-width:0.50;}
 .time-scale text {font-weight:bold;}
 
-.row-item {cursor: pointer}
+.row-item {cursor: pointer;}
 .row-item .even {fill: #ccc; opacity: 0.05;}
 .row-item .odd {fill: #000; opacity: 0.05;}
 .row-item:hover .odd,
@@ -48,14 +48,21 @@
 .row-item.status4xx .even,
 .row-item.status4xx .odd,
 .row-item.status3xx .even,
-.row-item.status3xx .odd {opacity: 0.3}
+.row-item.status3xx .odd {opacity: 0.3;}
 .row-item.status5xx:hover .even,
 .row-item.status5xx:hover .odd,
 .row-item.status4xx:hover .even,
 .row-item.status4xx:hover .odd,
 .row-item.status3xx:hover .even,
-.row-item.status3xx:hover .odd {opacity: 0.5}
+.row-item.status3xx:hover .odd {opacity: 0.5;}
 
+/** overlay animation settings **/
+.water-fall-chart .line-label-holder,
+.row-item,
+.water-fall-chart .line-holder line,
+.time-scale line,
+.time-scale text {transition:transform 60ms;}
+.water-fall-chart.closing {transition-delay: 60ms;}
 
 .labels { overflow: hidden;}
 
@@ -90,7 +97,7 @@
 .block-undefined {fill: #0f0;}
 
 /* Info overlay SVG - wrapper */
-.info-overlay {fill: #fff; stroke: #cdcdcd; }
+.info-overlay {fill: #fff; stroke: #cdcdcd;}
 .info-overlay-close-btn {fill: rgba(205, 205, 205, 0.8); transform: translate(-23px, -23px); cursor: pointer;}
 .info-overlay-close-btn text {fill: #111; pointer-events: none;}
 .info-overlay-close-btn:focus {border: solid 1px #36c;}

Diff for: src/ts/waterfall/svg-chart.ts

@@ -139,12 +139,14 @@ export function createWaterfallSvg(data: WaterfallData, options: ChartRenderOpti
 
   let barEls: SVGGElement[] = [];
 
-  function getChartHeight(): string {
-    return (chartHolderHeight + context.overlayManager.getCombinedOverlayHeight()).toString() + "px";
+  function getChartHeight(): number {
+    return chartHolderHeight + context.overlayManager.getCombinedOverlayHeight();
   }
 
   context.pubSub.subscribeToOverlayChanges(() => {
-    timeLineHolder.style.height = getChartHeight();
+    const newHeight = getChartHeight();
+    timeLineHolder.classList.toggle("closing", newHeight < timeLineHolder.clientHeight);
+    timeLineHolder.style.height = `${newHeight}px`;
   });
 
   /** Renders single row and hooks up behaviour */