Ignore offset, easing and composite in getKeyframeKeys

Author: inokawa

src/hooks/core.spec.ts

@@ -0,0 +1,42 @@
+import { describe, it, expect } from "@jest/globals";
+import { getKeyframeKeys } from "./core";
+
+describe("getKeyframeKeys", () => {
+  it("normal", () => {
+    expect(
+      getKeyframeKeys([
+        { transform: "rotate(-720deg) translateX(0px)" },
+        { transform: "rotate(-360deg) translateX(-250px)", offset: 0.25 },
+        {
+          transform: "rotate(0deg) translateX(0px)",
+          fill: "red",
+          fontSize: "48px",
+          fontWeight: "bold",
+          offset: 0.75,
+        },
+        { transform: "rotate(360deg) translateX(0px)", fill: "lightskyblue" },
+      ])
+    ).toEqual(["transform", "fill", "fontSize", "fontWeight"]);
+  });
+
+  it("ignore offset, easing and composite", () => {
+    expect(
+      getKeyframeKeys([
+        { transform: "rotate(-720deg) translateX(0px)", easing: "ease" },
+        {
+          transform: "rotate(0deg) translateX(0px)",
+          offset: 0.75,
+          composite: "accumulate",
+        },
+        { transform: "rotate(360deg) translateX(0px)" },
+      ])
+    ).toEqual(["transform"]);
+  });
+
+  it("map cssFloat and cssOffset", () => {
+    expect(getKeyframeKeys([{ cssFloat: "left", cssOffset: 10 }])).toEqual([
+      "float",
+      "offset",
+    ]);
+  });
+});

src/hooks/core.ts

@@ -26,15 +26,18 @@ export interface AnimationOptions
 }
 
 export const getKeyframeKeys = (keyframes: TypedKeyframe[]): string[] =>
-  uniqBy(keyframes.flatMap(getKeys)).map((k) => {
-    if (k === "cssFloat") {
-      return "float";
+  uniqBy(keyframes.flatMap(getKeys)).reduce((acc, k) => {
+    if (["offset", "easing", "composite"].includes(k)) {
+      // Ignore
+    } else if (k === "cssFloat") {
+      acc.push("float");
     } else if (k === "cssOffset") {
-      return "offset";
+      acc.push("offset");
     } else {
-      return k;
+      acc.push(k);
     }
-  });
+    return acc;
+  }, [] as string[]);
 
 export const createAnimation = (
   el: HTMLElement | null,