Remove persist method in favor of keyframe function

inokawa · Nov 19, 2022 · d235e04 · d235e04
1 parent 54bee0a
commit d235e04
Show file tree

Hide file tree

Showing 4 changed files with 33 additions and 34 deletions.
diff --git a/src/react/hooks/useAnimation.ts b/src/react/hooks/useAnimation.ts
@@ -15,7 +15,6 @@ import {
   _end,
   _finish,
   _pause,
-  _persist,
   _play,
   _reverse,
   _setRate,
@@ -30,7 +29,6 @@ export type AnimationHandle = {
   cancel: () => AnimationHandle;
   finish: () => AnimationHandle;
   pause: () => AnimationHandle;
-  persist: () => AnimationHandle;
   setTime: (time: number) => AnimationHandle;
   setPlaybackRate: (
     rate: number | ((prevRate: number) => number)
@@ -118,10 +116,6 @@ export const useAnimation = (
           _pause(getAnimation());
           return externalHandle;
         },
-        persist: () => {
-          _persist(getAnimation(), getTarget()!, getKeyframes());
-          return externalHandle;
-        },
         setTime: (time: number) => {
           _setTime(getAnimation(), time);
           return externalHandle;

diff --git a/src/react/hooks/useTransitionAnimation.ts b/src/react/hooks/useTransitionAnimation.ts
@@ -11,7 +11,6 @@ import {
   useAnimationController,
 } from "./useAnimationController";
 import { getKeys } from "../../core/utils";
-import { usePrevious } from "./usePrevious";
 import { useIsomorphicLayoutEffect } from "./useIsomorphicLayoutEffect";
 
 export const useTransitionAnimation = <T extends TransitionState>(
@@ -41,15 +40,11 @@ export const useTransitionAnimation = <T extends TransitionState>(
     };
   });
 
-  const prevState = usePrevious(currentState);
-
   useIsomorphicLayoutEffect(() => {
     if (currentState === "update") return;
     const handle = definitions[currentState as T];
     if (!handle) return;
-    animation.get(prevState as T).persist();
     animation
-      .cancelAll()
       .get(currentState as T)
       .play()
       .end()

diff --git a/stories/hooks/useAnimationController.stories.tsx b/stories/hooks/useAnimationController.stories.tsx
@@ -226,34 +226,28 @@ export const Chained: StoryObj = {
 export const Sequence: StoryObj = {
   render: () => {
     const timing: AnimationOptions = { duration: 600, easing: "ease-out" };
-    const red = useAnimation({ fill: "red" }, timing);
-    const blue = useAnimation({ fill: "blue" }, timing);
-    const green = useAnimation({ fill: "green" }, timing);
+    const red = useAnimation(
+      (prev) => [{ fill: prev.fill }, { fill: "red" }],
+      timing
+    );
+    const blue = useAnimation(
+      (prev) => [{ fill: prev.fill }, { fill: "blue" }],
+      timing
+    );
+    const green = useAnimation(
+      (prev) => [{ fill: prev.fill }, { fill: "green" }],
+      timing
+    );
     const animate = useAnimationController({ red, blue, green });
 
     const onClickRed = useCallback(async () => {
-      const handle = animate.get("red");
-      try {
-        await handle.play().end();
-      } finally {
-        handle.persist();
-      }
+      await animate.get("red").play().end();
     }, []);
     const onClickBlue = useCallback(async () => {
-      const handle = animate.get("blue");
-      try {
-        await handle.play().end();
-      } finally {
-        handle.persist();
-      }
+      await animate.get("blue").play().end();
     }, []);
     const onClickGreen = useCallback(async () => {
-      const handle = animate.get("green");
-      try {
-        await handle.play().end();
-      } finally {
-        handle.persist();
-      }
+      await animate.get("green").play().end();
     }, []);
     const onClickAll = useCallback(async () => {
       try {

diff --git a/stories/hooks/useTransitionAnimation.stories.tsx b/stories/hooks/useTransitionAnimation.stories.tsx
@@ -155,13 +155,29 @@ const ExpandRect = ({ i, length }: { i: number; length: number }) => {
     duration: 1000,
   };
 
+  const startStyle = (s: CSSStyleDeclaration, defaultScale: number) => {
+    const transform = s.transform;
+    const scale =
+      transform.slice("matrix".length + 1, transform.indexOf(",") - 1) ||
+      defaultScale;
+    return {
+      backgroundColor: s.backgroundColor,
+      transform: `scale(${scale})`,
+      opacity: s.opacity,
+    };
+  };
+
   const transition = useTransitionAnimation({
     enter: useAnimation(
-      [{ backgroundColor: "skyblue", transform: "scale(1)", opacity: 1 }],
+      (prev) => [
+        startStyle(prev, 0),
+        { backgroundColor: "skyblue", transform: "scale(1)", opacity: 1 },
+      ],
       { ...timing, delay: i * 100 }
     ),
     exit: useAnimation(
-      [
+      (prev) => [
+        startStyle(prev, 1),
         {
           backgroundColor: "limegreen",
           transform: "scale(0)",