Evaluate keyframe keys lazily in fallback of commitStyles

Author: inokawa

src/hooks/core.ts

@@ -74,7 +74,7 @@ export const createHandle = () => {
     _commit: (
       animation: Animation | undefined,
       el: HTMLElement,
-      keys: string[]
+      getKeys: () => string[]
     ) => {
       if (!animation) return;
       if (animation.commitStyles) {
@@ -83,7 +83,7 @@ export const createHandle = () => {
       }
       // Fallback for commitStyles
       const computedStyle = getComputedStyle(el);
-      keys.forEach((k) => {
+      getKeys().forEach((k) => {
         (el.style as any)[k] = (computedStyle as any)[k];
       });
     },

src/hooks/useAnimation.ts

@@ -96,9 +96,7 @@ export const useAnimation = (
           return externalHandle;
         },
         commit: () => {
-          handle._commit(
-            getAnimation(),
-            getTarget()!,
+          handle._commit(getAnimation(), getTarget()!, () =>
             getKeyframeKeys(getKeyframes())
           );
           return externalHandle;

src/hooks/useAnimations.ts

@@ -98,9 +98,7 @@ export const useAnimations = <ID extends string>(
         return externalHandle;
       },
       commit: (name) => {
-        handle._commit(
-          getAnimation(name),
-          getTarget()!,
+        handle._commit(getAnimation(name), getTarget()!, () =>
           getKeyframeKeys(toArray(getKeyframesAndOptions(name)[0]))
         );
         return externalHandle;