fix transition

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;
 };

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
+      );
     }
   );
 

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,

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;