Add handling for popover animation

index.html

@@ -321,15 +321,15 @@ npm install driver.js</pre
 
           window.setTimeout(() => {
             driverObj.highlight({ element: ".buttons button:first-child" });
-          }, 800);
+          }, 2000);
 
           window.setTimeout(() => {
             driverObj.highlight({ element: ".buttons button:nth-child(5)" });
-          }, 1500);
+          }, 4000);
 
           window.setTimeout(() => {
             driverObj.highlight({ element: "h2" });
-          }, 2500);
+          }, 8000);
         });
 
       document

src/highlight.ts

@@ -1,7 +1,7 @@
 import { DriveStep } from "./driver";
 import { refreshStage, trackActiveElement, transitionStage } from "./stage";
 import { getConfig } from "./config";
-import { repositionPopover, renderPopover } from "./popover";
+import { repositionPopover, renderPopover, hidePopover } from "./popover";
 import { bringInView } from "./utils";
 
 let previousHighlight: Element | undefined;
@@ -37,6 +37,13 @@ function transferHighlight(from: Element, to: Element) {
   const duration = 400;
   const start = Date.now();
 
+  // If it's the first time we're highlighting an element, we show
+  // the popover immediately. Otherwise, we wait for the animation
+  // to finish before showing the popover.
+  const hasDelayedPopover = !from || from !== to;
+
+  hidePopover();
+
   const animate = () => {
     // This makes sure that the repeated calls to transferHighlight
     // don't interfere with each other. Only the last call will be
@@ -52,11 +59,13 @@ function transferHighlight(from: Element, to: Element) {
     } else {
       trackActiveElement(to);
 
+      if (hasDelayedPopover) {
+        renderPopover(to);
+      }
+
       currentTransitionCallback = undefined;
     }
 
-    // refreshStage();
-    // refreshPopover();
     window.requestAnimationFrame(animate);
   };
 
@@ -64,7 +73,9 @@ function transferHighlight(from: Element, to: Element) {
   window.requestAnimationFrame(animate);
 
   bringInView(to);
-  renderPopover(to);
+  if (!hasDelayedPopover) {
+    renderPopover(to);
+  }
 
   from.classList.remove("driver-active-element");
   to.classList.add("driver-active-element");

src/popover.ts

@@ -1,5 +1,6 @@
 import { bringInView } from "./utils";
 import { STAGE_PADDING } from "./stage";
+import { getConfig } from "./config";
 
 export type Side = "top" | "right" | "bottom" | "left";
 export type Alignment = "start" | "center" | "end";
@@ -27,6 +28,14 @@ type PopoverDOM = {
 
 let popover: PopoverDOM | undefined;
 
+export function hidePopover() {
+  if (!popover) {
+    return;
+  }
+
+  popover.wrapper.style.display = "none";
+}
+
 export function renderPopover(element: Element) {
   if (!popover) {
     popover = createPopover();

src/style.css

@@ -25,6 +25,10 @@
   animation: animate-fade-in 100ms ease-in-out;
 }
 
+.driver-fade .driver-popover {
+  animation: animate-fade-in 100ms;
+}
+
 /* Popover styles */
 .driver-popover {
   color: #2d2d2d;