Handle animation for the popover

src/common/constants.js

@@ -1,7 +1,6 @@
 export const OVERLAY_OPACITY = 0.75;
 export const OVERLAY_PADDING = 10;
 export const OVERLAY_ANIMATE = true;
-export const OVERLAY_ZINDEX = '999999999';
 
 export const ESC_KEY_CODE = 27;
 export const LEFT_KEY_CODE = 37;
@@ -20,6 +19,9 @@ export const CLASS_NEXT_STEP_BTN = 'driver-next-btn';
 export const CLASS_PREV_STEP_BTN = 'driver-prev-btn';
 export const CLASS_BTN_DISABLED = 'driver-disabled';
 
+// It must match the one set in the animations in CSS file
+export const ANIMATION_DURATION_MS = 200;
+
 // language=HTML
 export const POPOVER_HTML = `
   <div id="${ID_POPOVER}">

src/core/element.js

@@ -1,4 +1,5 @@
 import Position from './position';
+import { ANIMATION_DURATION_MS } from "../common/constants";
 
 /**
  * Wrapper around DOMElements to enrich them
@@ -154,8 +155,6 @@ export default class Element {
    * this element of has just decided to highlight it
    */
   onHighlightStarted() {
-    this.showPopover();
-
     // Because element has just started highlighting
     // and hasn't completely highlighted
     this.highlightFinished = false;
@@ -176,15 +175,16 @@ export default class Element {
     this.highlightFinished = true;
 
     const highlightedElement = this;
-    const lastHighlightedElement = this.overlay.getLastHighlightedElement();
-    const popoverElement = this.popover;
-
     const highlightedNode = this.node;
+
+    const lastHighlightedElement = this.overlay.getLastHighlightedElement();
     const lastHighlightedNode = lastHighlightedElement && lastHighlightedElement.node;
 
     // If this element is not already highlighted (because this call could
     // be from the resize or scroll) and is not in view
     if (highlightedNode !== lastHighlightedNode) {
+      const popoverElement = this.popover;
+
       if (popoverElement && !popoverElement.isInView()) {
         popoverElement.bringInView();
       }
@@ -223,9 +223,14 @@ export default class Element {
       return;
     }
 
-    const position = this.getCalculatedPosition();
+    const showAtPosition = this.getCalculatedPosition();
+
+    // For first highlight, show it immediately because there won't be any animation
+    const animationDuration = !this.overlay.lastHighlightedElement ? 0 : ANIMATION_DURATION_MS * 2;
 
-    this.popover.show(position);
+    window.setTimeout(() => {
+      this.popover.show(showAtPosition);
+    }, animationDuration);
   }
 
   /**

src/core/overlay.js

@@ -1,6 +1,6 @@
 import Position from './position';
-import { ID_OVERLAY, OVERLAY_HTML, POPOVER_HTML } from "../common/constants";
-import { createNodeFromString } from "../common/utils";
+import { ID_OVERLAY, OVERLAY_HTML } from '../common/constants';
+import { createNodeFromString } from '../common/utils';
 
 /**
  * Responsible for overlay creation and manipulation i.e.
@@ -17,7 +17,6 @@ export default class Overlay {
     this.options = options;
 
     this.positionToHighlight = new Position({}); // position at which layover is to be patched at
-    this.highlightedPosition = new Position({}); // position at which layover is patched currently
     this.highlightedElement = null;              // currently highlighted dom element (instance of Element)
     this.lastHighlightedElement = null;          // element that was highlighted before current one
 
@@ -48,7 +47,7 @@ export default class Overlay {
    * @param {Element} element
    * @param {boolean} animate
    */
-  highlight(element, animate = true) {
+  highlight(element) {
     if (!element || !element.node) {
       console.warn('Invalid element to highlight. Must be an instance of `Element`');
       return;
@@ -72,12 +71,6 @@ export default class Overlay {
     this.highlightedElement = element;
     this.positionToHighlight = position;
 
-    // If animation is not required then set the last path to be same
-    // as the current path so that there is no easing towards it
-    if (!this.options.animate || !animate) {
-      this.highlightedPosition = this.positionToHighlight;
-    }
-
     this.draw();
   }
 

src/driver.scss

@@ -118,6 +118,8 @@ div#driver-page-overlay {
   opacity: 0;
   pointer-events: none;
   z-index: 100002 !important;
+
+  // If you update this duration, make sure to update `ANIMATION_DURATION_MS` constant
   -webkit-transition: all 0.2s;
   -moz-transition: all 0.2s;
   -ms-transition: all 0.2s;
@@ -134,6 +136,8 @@ div#driver-highlighted-element-stage {
   background: white;
   z-index: 100003 !important;
   display: none;
+
+  // If you update this duration, make sure to update `ANIMATION_DURATION_MS` constant
   -webkit-transition: all 0.2s;
   -moz-transition: all 0.2s;
   -ms-transition: all 0.2s;