Change end method to waitFor and support waiting reverseFinish

src/core/waapi.ts

@@ -1,5 +1,5 @@
 import type { CSSProperties } from "react";
-import { getKeys, getStyle, noop, toArray, uniqBy } from "./utils";
+import { getKeys, getStyle, toArray, uniqBy } from "./utils";
 
 export type AnimatableCSSProperties = Omit<
   CSSProperties,
@@ -125,7 +125,22 @@ export const _setRate = (
     typeof arg === "function" ? arg(animation.playbackRate) : arg
   );
 };
-export const _end = (animation: Animation | undefined) => {
+
+export type WaitingAnimationEventName = "finish" | "reverseFinish";
+export const _waitFor = (
+  animation: Animation | undefined,
+  name: WaitingAnimationEventName
+): Promise<void> => {
   if (!animation) return Promise.resolve();
-  return animation.finished.then(noop);
+
+  return new Promise<void>((resolve) => {
+    animation.onfinish = () => {
+      if (
+        (name === "finish" && animation.playbackRate > 0) ||
+        (name === "reverseFinish" && animation.playbackRate < 0)
+      ) {
+        resolve();
+      }
+    };
+  });
 };

src/react/hooks/useAnimation.ts

@@ -10,13 +10,14 @@ import {
   ReverseOptions,
   TypedKeyframe,
   _cancel,
-  _end,
+  _waitFor,
   _finish,
   _pause,
   _play,
   _reverse,
   _setRate,
   _setTime,
+  WaitingAnimationEventName,
 } from "../../core/waapi";
 import { useIsomorphicLayoutEffect } from "./useIsomorphicLayoutEffect";
 
@@ -39,7 +40,7 @@ export type AnimationHandle<Args = void> = {
   setPlaybackRate: (
     rate: number | ((prevRate: number) => number)
   ) => AnimationHandle<Args>;
-  end: () => Promise<AnimationHandle<Args>>;
+  waitFor: (event: WaitingAnimationEventName) => Promise<AnimationHandle<Args>>;
 };
 
 export const useAnimation = <Args = void>(
@@ -129,7 +130,8 @@ export const useAnimation = <Args = void>(
             _setRate(getAnimation(), rate);
             return externalHandle;
           },
-          end: () => _end(getAnimation()).then(() => externalHandle),
+          waitFor: (event: WaitingAnimationEventName) =>
+            _waitFor(getAnimation(), event).then(() => externalHandle),
         }
       );
 

src/react/hooks/useAnimationFunction.ts

@@ -7,13 +7,14 @@ import {
   PlayOptions,
   ReverseOptions,
   _cancel,
-  _end,
+  _waitFor,
   _finish,
   _pause,
   _play,
   _reverse,
   _setRate,
   _setTime,
+  WaitingAnimationEventName,
 } from "../../core/waapi";
 import { useIsomorphicLayoutEffect } from "./useIsomorphicLayoutEffect";
 
@@ -35,7 +36,9 @@ export type AnimationFunctionHandle<Args = void> = {
   setPlaybackRate: (
     rate: number | ((prevRate: number) => number)
   ) => AnimationFunctionHandle<Args>;
-  end: () => Promise<AnimationFunctionHandle<Args>>;
+  waitFor: (
+    event: WaitingAnimationEventName
+  ) => Promise<AnimationFunctionHandle<Args>>;
 };
 
 export type ComputedTimingContext = Required<
@@ -137,7 +140,8 @@ export const useAnimationFunction = <Args = void>(
         _setRate(getAnimation(), rate);
         return externalHandle;
       },
-      end: () => _end(getAnimation()).then(() => externalHandle),
+      waitFor: (event: WaitingAnimationEventName) =>
+        _waitFor(getAnimation(), event).then(() => externalHandle),
     };
     return [
       externalHandle,

src/react/hooks/useTransitionAnimation.ts

@@ -94,7 +94,7 @@ export const useTransitionAnimation = (keyframes: {
 
     animationsRef.current[currentState]
       ?.play()
-      .end()
+      .waitFor("finish")
       .then(() => {
         if (currentState === "exit") {
           notify(EXITED);

stories/hooks/useAnimation.stories.tsx

@@ -688,9 +688,9 @@ export const Sequence: StoryObj = {
 
     const onClickAll = useCallback(async () => {
       try {
-        await animate.play({ args: "red" }).end();
-        await animate.play({ args: "blue" }).end();
-        await animate.play({ args: "green" }).end();
+        await animate.play({ args: "red" }).waitFor("finish");
+        await animate.play({ args: "blue" }).waitFor("finish");
+        await animate.play({ args: "green" }).waitFor("finish");
       } catch (e) {
         // ignore uncaught promise error
       }
@@ -911,11 +911,11 @@ const Block = ({ i, length: n }: { i: number; length: number }) => {
     three.cancel();
     const run = async () => {
       try {
-        await one.play().end();
+        await one.play().waitFor("finish");
         one.cancel();
-        await two.play().end();
+        await two.play().waitFor("finish");
         two.cancel();
-        await three.play().end();
+        await three.play().waitFor("finish");
         three.cancel();
         run();
       } catch (e) {