feat: derive transition duration without explicit prop

hi-ogawa · Oct 22, 2023 · c43e421 · c43e421
1 parent 1512838
commit c43e421
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 7 deletions.
diff --git a/packages/app/src/components/stories.tsx b/packages/app/src/components/stories.tsx
@@ -5,6 +5,7 @@ import { useTinyStoreStorage } from "@hiogawa/tiny-store/dist/react";
 import { TOAST_POSITIONS, type ToastPosition } from "@hiogawa/tiny-toast";
 import {
   Transition,
+  TransitionV2,
   useLaggedBoolean,
 } from "@hiogawa/tiny-transition/dist/react";
 import { ANTD_VARS } from "@hiogawa/unocss-preset-antd";
@@ -510,7 +511,7 @@ export function StorySlide() {
           >
             <span className="border px-2 py-1">hello from top/right</span>
           </Transition>
-          <Transition
+          <TransitionV2
             appear
             show={show}
             className="absolute bottom-2 left-2 inline-block duration-500 transform"
@@ -520,7 +521,7 @@ export function StorySlide() {
             leaveTo="translate-x-[-200%]"
           >
             <span className="border px-2 py-1">hello from bottom/left</span>
-          </Transition>
+          </TransitionV2>
         </div>
       </section>
     </div>

diff --git a/packages/tiny-transition/src/core.ts b/packages/tiny-transition/src/core.ts
@@ -157,7 +157,8 @@ function onTransitionEnd(el: HTMLElement, callback: () => void) {
   };
 }
 
-function computeTransitionTimeout(el: HTMLElement): number {
+export function computeTransitionTimeout(el: HTMLElement): number {
+  // this probably also `forceStyle`
   const style = getComputedStyle(el);
   const [duration, delay] = [
     style.transitionDuration,

diff --git a/packages/tiny-transition/src/lagged/react.tsx b/packages/tiny-transition/src/lagged/react.tsx
@@ -16,6 +16,7 @@ import {
   TRANSITION_CALLBACK_TYPES,
   type TransitionCallbackProps,
   type TransitionCallbackType,
+  computeTransitionTimeout,
 } from "../core";
 import { simpleForawrdRef } from "../react";
 import {
@@ -60,7 +61,6 @@ export const TransitionV2 = simpleForawrdRef(function TransitionV2(
     show: boolean;
     appear?: boolean;
     render?: (props: Record<string, any>) => React.ReactNode;
-    duration: number;
   } & TransitionClassProps &
     TransitionCallbackProps & {
       // choose only common props from `JSX.IntrinsicElements["div"]` to simplify auto-complete
@@ -87,17 +87,24 @@ export const TransitionV2 = simpleForawrdRef(function TransitionV2(
   );
 
   // lagged state
+  const durationRef = useRef(0);
   const state = useLaggedBoolean(props.show, {
-    duration: props.duration,
+    get duration() {
+      return durationRef.current;
+    },
     appear: props.appear,
     ...stableCallbackPropsWithRef,
   });
 
   const mergedRefs = useMergeRefs(ref, elRef, (el: HTMLElement | null) => {
-    // hacky way to deal with `onEnterFrom`
-    // since "enterFrom" event comes before we render dom...
     if (el) {
+      // hacky way to deal with `onEnterFrom`
+      // since "enterFrom" event comes before we render dom...
       callbackProps.onEnterFrom?.(el);
+
+      // derive timeout duration
+      // (note that this "force styles" so it must be called after "onEnterFrom")
+      durationRef.current = computeTransitionTimeout(el);
     }
   });
   const render = props.render ?? defaultRender;