Add fallback for commitStyles

Author: inokawa

README.md

@@ -118,7 +118,7 @@ Currently it only detects enter/update/exit of children by key, that works simil
 1. [browsers that have Element.animate()](https://caniuse.com/mdn-api_element_animate)
 1. browsers that have no Web Animations APIs
 
-In 1, you can use all functions of this library without polyfill. Some of the newer features like [composite mode](https://caniuse.com/web-animation), [commitStyles](https://caniuse.com/mdn-api_animation_commitstyles) and [CSS Motion Path](https://caniuse.com/css-motion-paths) may be ignored in some browsers though.
+In 1, you can use all functions of this library without polyfill. Some of the newer features like [composite mode](https://caniuse.com/web-animation) and [CSS Motion Path](https://caniuse.com/css-motion-paths) may be ignored in some browsers though.
 
 In 2, you can use this library but `useAnimationFuction` would not work.
 

src/hooks/core.ts

@@ -68,9 +68,21 @@ export const createHandle = () => {
       if (!animation) return;
       animation.pause();
     },
-    _commit: (animation: Animation | undefined) => {
+    _commit: (
+      animation: Animation | undefined,
+      el: HTMLElement,
+      keys: string[]
+    ) => {
       if (!animation) return;
-      animation.commitStyles?.();
+      if (animation.commitStyles) {
+        animation.commitStyles();
+        return;
+      }
+      // Fallback for commitStyles
+      const computedStyle = getComputedStyle(el);
+      keys.forEach((k) => {
+        (el.style as any)[k] = (computedStyle as any)[k];
+      });
     },
     _setTime: (animation: Animation | undefined, time: number) => {
       if (!animation) return;

src/hooks/useAnimation.ts

@@ -1,5 +1,11 @@
 import { createRef, useEffect, useLayoutEffect, useRef, useState } from "react";
-import { isArray, isSameObject, isSameObjectArray } from "../utils";
+import {
+  getKeys,
+  isSameObject,
+  isSameObjectArray,
+  toArray,
+  uniqBy,
+} from "../utils";
 import {
   AnimationOptions,
   createAnimation,
@@ -35,7 +41,7 @@ export const useAnimation = (
       const ref = createRef<HTMLElement>();
 
       const getTarget = () => ref.current;
-      const getKeyframes = () => keyframeRef.current;
+      const getKeyframes = () => toArray(keyframeRef.current);
       const getOptions = () => optionsRef.current;
 
       let cache:
@@ -47,11 +53,10 @@ export const useAnimation = (
           ]
         | undefined;
       const initAnimation = (
-        kf: TypedKeyframe | TypedKeyframe[],
+        keyframes: TypedKeyframe[],
         options: AnimationOptions | undefined
       ): Animation => {
         const el = getTarget()!;
-        const keyframes = isArray(kf) ? kf : [kf];
         if (cache) {
           const [prevAnimation, prevEl, prevKeyframes, prevOptions] = cache;
           if (
@@ -96,7 +101,11 @@ export const useAnimation = (
           return externalHandle;
         },
         commit: () => {
-          handle._commit(getAnimation());
+          handle._commit(
+            getAnimation(),
+            getTarget()!,
+            uniqBy(getKeys(getKeyframes()))
+          );
           return externalHandle;
         },
         setTime: (time) => {

src/hooks/useAnimations.ts

@@ -1,5 +1,11 @@
 import { createRef, useEffect, useLayoutEffect, useRef, useState } from "react";
-import { isArray, isSameObject, isSameObjectArray } from "../utils";
+import {
+  getKeys,
+  isArray,
+  isSameObject,
+  isSameObjectArray,
+  uniqBy,
+} from "../utils";
 import {
   AnimationOptions,
   createAnimation,
@@ -97,7 +103,11 @@ export const useAnimations = <ID extends string>(
         return externalHandle;
       },
       commit: (name) => {
-        handle._commit(getAnimation(name));
+        handle._commit(
+          getAnimation(name),
+          getTarget()!,
+          uniqBy(getKeys(getKeyframesAndOptions(name)[0]))
+        );
         return externalHandle;
       },
       setTime: (name, time) => {

src/utils.ts

@@ -18,3 +18,10 @@ export const isSameObjectArray = (
   if (target.length !== prev.length) return false;
   return target.every((t, i) => isSameObject(t, prev[i]));
 };
+
+export const toArray = <T>(items: T | T[]): T[] =>
+  isArray(items) ? items : [items];
+
+export const uniqBy = <T extends string | number>(items: T[]): T[] => {
+  return Array.from(new Set(items));
+};