Rename commit method to persist and also cancel animation in it

Author: inokawa

src/hooks/core.ts

@@ -81,21 +81,22 @@ export const createHandle = () => {
       if (!animation) return;
       animation.pause();
     },
-    _commit: (
+    _persist: (
       animation: Animation | undefined,
       el: HTMLElement,
       keyframes: TypedKeyframe[]
     ) => {
       if (!animation) return;
       if (animation.commitStyles) {
         animation.commitStyles();
-        return;
+      } else {
+        // Fallback for commitStyles
+        const computedStyle = getComputedStyle(el);
+        getKeyframeKeys(keyframes).forEach((k) => {
+          (el.style as any)[k] = (computedStyle as any)[k];
+        });
       }
-      // Fallback for commitStyles
-      const computedStyle = getComputedStyle(el);
-      getKeyframeKeys(keyframes).forEach((k) => {
-        (el.style as any)[k] = (computedStyle as any)[k];
-      });
+      animation.cancel();
     },
     _setTime: (animation: Animation | undefined, time: number) => {
       if (!animation) return;

src/hooks/useAnimation.ts

@@ -14,7 +14,7 @@ export type AnimationHandle = {
   cancel: () => AnimationHandle;
   finish: () => AnimationHandle;
   pause: () => AnimationHandle;
-  commit: () => AnimationHandle;
+  persist: () => AnimationHandle;
   setTime: (time: number) => AnimationHandle;
   setPlaybackRate: (
     rate: number | ((prevRate: number) => number)
@@ -90,8 +90,8 @@ export const useAnimation = (
           handle._pause(getAnimation());
           return externalHandle;
         },
-        commit: () => {
-          handle._commit(getAnimation(), getTarget()!, getKeyframes());
+        persist: () => {
+          handle._persist(getAnimation(), getTarget()!, getKeyframes());
           return externalHandle;
         },
         setTime: (time) => {

src/hooks/useAnimations.ts

@@ -15,7 +15,7 @@ export type AnimationsHandle<ID extends string> = {
   cancel: (name: ID) => AnimationsHandle<ID>;
   finish: (name: ID) => AnimationsHandle<ID>;
   pause: (name: ID) => AnimationsHandle<ID>;
-  commit: (name: ID) => AnimationsHandle<ID>;
+  persist: (name: ID) => AnimationsHandle<ID>;
   setTime: (name: ID, time: number) => AnimationsHandle<ID>;
   setPlaybackRate: (
     name: ID,
@@ -97,8 +97,8 @@ export const useAnimations = <ID extends string>(
         handle._pause(getAnimation(name));
         return externalHandle;
       },
-      commit: (name) => {
-        handle._commit(
+      persist: (name) => {
+        handle._persist(
           getAnimation(name),
           getTarget()!,
           toArray(getKeyframesAndOptions(name)[0])

stories/hooks/useAnimations.stories.tsx

@@ -231,27 +231,24 @@ export const Sequence: StoryObj = {
     });
 
     const onClickRed = useCallback(async () => {
-      animate.cancelAll();
       try {
         await animate.play("red").end("red");
       } finally {
-        animate.commit("red");
+        animate.persist("red");
       }
     }, []);
     const onClickBlue = useCallback(async () => {
-      animate.cancelAll();
       try {
         await animate.play("blue").end("blue");
       } finally {
-        animate.commit("blue");
+        animate.persist("blue");
       }
     }, []);
     const onClickGreen = useCallback(async () => {
-      animate.cancelAll();
       try {
         await animate.play("green").end("green");
       } finally {
-        animate.commit("green");
+        animate.persist("green");
       }
     }, []);
     const onClickAll = useCallback(async () => {