diff --git a/src/common/constants.js b/src/common/constants.js
index 327abf4310e083715c5845aa8b286090fbf55716..76485bf0094cf89f876c95fe6d8da6e990e80a64 100644
--- a/src/common/constants.js
+++ b/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 = `
diff --git a/src/core/element.js b/src/core/element.js
index 6dea8aa21f832d1d7f8f3f9f1730fc5abbc94a00..4566dc08a6e55cf77bb96de399811eaf44ee6b41 100644
--- a/src/core/element.js
+++ b/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);
}
/**
diff --git a/src/core/overlay.js b/src/core/overlay.js
index e154b30b1898b4c1397aa5768130b097eae37153..f516bfa4ae8d12c277f15094ba0a758f2a8be17b 100644
--- a/src/core/overlay.js
+++ b/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();
}
diff --git a/src/driver.scss b/src/driver.scss
index ac8c23318d969402339f6df3a23fac2255bb870c..a2b8e6d606e11b432de29e94bdee667563ce25b9 100644
--- a/src/driver.scss
+++ b/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;