From 5171c76997843958c57dff7c2458d0208002b50d Mon Sep 17 00:00:00 2001
From: binrysearch <me@binarysearch.dev>
Date: Thu, 5 Sep 2024 23:15:46 +0100
Subject: [PATCH] fix transition

---
 src/packages/tooltip/tooltip.ts             | 10 +++++++++-
 src/packages/tour/components/TourRoot.ts    |  8 ++++++--
 src/packages/tour/components/TourTooltip.ts |  2 +-
 src/styles/introjs.scss                     |  4 ++++
 4 files changed, 20 insertions(+), 4 deletions(-)

diff --git a/src/packages/tooltip/tooltip.ts b/src/packages/tooltip/tooltip.ts
index 43b16f7d9..481078a4a 100644
--- a/src/packages/tooltip/tooltip.ts
+++ b/src/packages/tooltip/tooltip.ts
@@ -326,6 +326,7 @@ export const Tooltip = (
   const left = van.state<string>("auto");
   const marginLeft = van.state<string>("auto");
   const marginTop = van.state<string>("auto");
+  const opacity = van.state<number>(0);
   // setting a default height for the tooltip instead of 0 to avoid flickering
   const tooltipHeight = van.state<number>(150);
   // max width of the tooltip according to its CSS class
@@ -384,7 +385,7 @@ export const Tooltip = (
   const tooltip = div(
     {
       style: () =>
-        `top: ${top.val}; right: ${right.val}; bottom: ${bottom.val}; left: ${left.val}; margin-left: ${marginLeft.val}; margin-top: ${marginTop.val};`,
+        `top: ${top.val}; right: ${right.val}; bottom: ${bottom.val}; left: ${left.val}; margin-left: ${marginLeft.val}; margin-top: ${marginTop.val};opacity: ${opacity.val}`,
       className: () => `${tooltipClassName} introjs-${position.val}`,
       role: "dialog",
     },
@@ -397,5 +398,12 @@ export const Tooltip = (
     ]
   );
 
+  // wait for the helper layer to be rendered before showing the tooltip
+  // this is to prevent the tooltip from flickering when the helper layer is transitioning
+  // the 300ms delay is coming from the helper layer transition duration
+  setTimeout(() => {
+    opacity.val = 1;
+  }, 300);
+
   return tooltip;
 };
diff --git a/src/packages/tour/components/TourRoot.ts b/src/packages/tour/components/TourRoot.ts
index 54744fdf7..f89eebe27 100644
--- a/src/packages/tour/components/TourRoot.ts
+++ b/src/packages/tour/components/TourRoot.ts
@@ -33,7 +33,7 @@ export const TourRoot = ({ tour }: TourRootProps) => {
     {
       className: "introjs-tour",
       style: () =>
-        style({ transition: "all 250ms ease-out", opacity: `${opacity.val}` }),
+        style({ opacity: `${opacity.val}` }),
     },
     // helperLayer should not be re-rendered when the state changes for the transition to work
     helperLayer,
@@ -147,7 +147,11 @@ export const TourRoot = ({ tour }: TourRootProps) => {
           })
         : null;
 
-      return div(overlayLayer, referenceLayer, disableInteraction);
+      return div(
+        overlayLayer,
+        referenceLayer,
+        disableInteraction
+      );
     }
   );
 
diff --git a/src/packages/tour/components/TourTooltip.ts b/src/packages/tour/components/TourTooltip.ts
index 0abac0db9..102fff137 100644
--- a/src/packages/tour/components/TourTooltip.ts
+++ b/src/packages/tour/components/TourTooltip.ts
@@ -1,5 +1,5 @@
 import { Tooltip, type TooltipProps } from "../../tooltip/tooltip";
-import van, { PropValueOrDerived, State } from "../../dom/van";
+import van, { PropValueOrDerived } from "../../dom/van";
 import {
   activeClassName,
   bulletsClassName,
diff --git a/src/styles/introjs.scss b/src/styles/introjs.scss
index fcc9f2f0f..087aefe05 100644
--- a/src/styles/introjs.scss
+++ b/src/styles/introjs.scss
@@ -13,6 +13,10 @@ $font_family: "Helvetica Neue", Inter, ui-sans-serif, "Apple Color Emoji",
 $background_color_9: #08c;
 $background_color_10: rgba(136, 136, 136, 0.24);
 
+.introjs-tour {
+  transition: all 0.3s ease-out;
+}
+
 .introjs-overlay {
   position: absolute;
   box-sizing: content-box;