Allow exit animations to play before step tooltip disappears.

src/js/bind.js

@@ -6,10 +6,11 @@ import { forOwn, isString, isUndefined } from 'lodash';
  * @private
  */
 function _setupAdvanceOnHandler(selector) {
-  return (e) => {
+  return (event) => {
     if (this.isOpen()) {
-      const targetIsEl = this.el && e.target === this.el;
-      const targetIsSelector = !isUndefined(selector) && e.target.matches(selector);
+      const targetIsEl = this.el && event.target === this.el;
+      const targetIsSelector = !isUndefined(selector) && event.target.matches(selector);
+
       if (targetIsSelector || targetIsEl) {
         this.tour.next();
       }

src/js/step.js

@@ -247,14 +247,18 @@ export class Step extends Evented {
    * Triggers `destroy` event
    */
   destroy() {
+    if (this.tooltip) {
+      this.tooltip.destroy();
+      this.tooltip = null;
+    }
+
     if (isElement(this.el) && this.el.parentNode) {
       this.el.parentNode.removeChild(this.el);
-      delete this.el;
+      this.el = null;
     }
 
-    if (this.tooltip) {
-      this.tooltip.destroy();
-      this.tooltip = null;
+    if (this.target) {
+      this.target.classList.remove('shepherd-enabled', 'shepherd-target');
     }
 
     this.trigger('destroy');
@@ -266,12 +270,6 @@ export class Step extends Evented {
   hide() {
     this.trigger('before-hide');
 
-    if (this.el) {
-      this.el.hidden = true;
-      // We need to manually set styles for < IE11 support
-      this.el.style.display = 'none';
-    }
-
     document.body.removeAttribute('data-shepherd-step');
 
     if (this.target) {
@@ -290,7 +288,11 @@ export class Step extends Evented {
    * @return {boolean} True if the step is open and visible
    */
   isOpen() {
-    return Boolean(this.el && !this.el.hidden);
+    return Boolean(
+      this.tooltip &&
+      this.tooltip.state &&
+      this.tooltip.state.isVisible
+    );
   }
 
   /**

src/js/tour.js

@@ -1,4 +1,4 @@
-import { isFunction, isNumber, isString, isUndefined } from 'lodash';
+import { isFunction, isNumber, isString, isUndefined, isEmpty } from 'lodash';
 import { Evented } from './evented.js';
 import { Step } from './step.js';
 import { bindMethods } from './bind.js';
@@ -112,18 +112,12 @@ export class Tour extends Evented {
    * @param {String} event The event name to trigger
    */
   done(event) {
-    if (this.currentStep) {
-      this.currentStep.hide();
+    if (!isEmpty(this.steps)) {
+      this.steps.forEach((step) => step.destroy());
     }
 
     this.trigger(event);
 
-    if (Shepherd.activeTour) {
-      Shepherd.activeTour.steps.forEach((step) => {
-        step.destroy();
-      });
-    }
-
     Shepherd.activeTour = null;
     document.body.classList.remove('shepherd-active');
     this.trigger('inactive', { tour: this });
@@ -224,6 +218,10 @@ export class Tour extends Evented {
    * @param {Boolean} forward True if we are going forward, false if backward
    */
   show(key = 0, forward = true) {
+    if (this.currentStep) {
+      this.currentStep.hide();
+    }
+
     this._setupActiveTour();
 
     const step = isString(key) ? this.getById(key) : this.steps[key];
@@ -258,17 +256,12 @@ export class Tour extends Evented {
   }
 
   /**
-   * If we have a currentStep, the tour is active, so just hide the step and remain active.
-   * Otherwise, make the tour active.
+   * Make this tour "active"
    * @private
    */
   _setupActiveTour() {
-    if (this.currentStep) {
-      this.currentStep.hide();
-    } else {
-      document.body.classList.add('shepherd-active');
-      this.trigger('active', { tour: this });
-    }
+    document.body.classList.add('shepherd-active');
+    this.trigger('active', { tour: this });
 
     Shepherd.activeTour = this;
   }

src/js/utils/tooltip-defaults.js

@@ -3,7 +3,6 @@ export const defaults = {
   arrow: true,
   arrowTransform: 'scale(2)',
   animation: 'fade',
-  delay: 200,
   duration: 420,
   flip: true,
   animateFill: false, // https://atomiks.github.io/tippyjs/#animate-fill-option

test/cypress/integration/element-targeting.spec.js

@@ -18,8 +18,17 @@ describe('Attaching tooltips to target elements in the DOM on each step', () =>
   });
 
   describe('Adding/Removing class names to the target of the current step', () => {
+    let tour;
+
+    beforeEach(() => {
+      tour = setupTour(Shepherd);
+    });
+
+    afterEach(() => {
+      tour.complete();
+    });
+
     it('Adds the "shepherd-target" and "shepherd-enabled" classes upon showing a step', () => {
-      const tour = setupTour(Shepherd);
       tour.start();
 
       cy.get('.hero-welcome')
@@ -28,7 +37,6 @@ describe('Attaching tooltips to target elements in the DOM on each step', () =>
     });
 
     it('Removes the "shepherd-target" and "shepherd-enabled" upon hiding a step', () => {
-      const tour = setupTour(Shepherd);
       tour.start();
       tour.next();
 

test/cypress/integration/test.acceptance.js

@@ -224,16 +224,5 @@ describe('Shepherd Acceptance Tests', () => {
         cy.get('.shepherd-step-element').should('have.length', 1);
       });
     });
-
-    describe('Cleaning up', () => {
-      it('renders no steps when the tour completes', () => {
-        const tour = setupTour(Shepherd);
-
-        tour.start();
-        tour.complete();
-
-        cy.get('.shepherd-step-element').should('not.exist');
-      });
-    });
   });
 });