Fix js animation and demo

Author: tolyo

@types/animations/animate-js.d.ts

@@ -1,24 +1,9 @@
-/**
- * @param {ng.AnimateProvider} $animateProvider
- */
-export function AnimateJsProvider($animateProvider: ng.AnimateProvider): void;
+export function AnimateJsProvider($animateProvider: any): void;
 export class AnimateJsProvider {
-  /**
-   * @param {ng.AnimateProvider} $animateProvider
-   */
-  constructor($animateProvider: ng.AnimateProvider);
+  constructor($animateProvider: any);
   $get: (
     | string
-    | (($injector: ng.InjectorService) => (
-        element: any,
-        event: any,
-        classes: any,
-        options: any,
-      ) => {
-        $$willAnimate: boolean;
-        end(): any;
-        start(): any;
-      })
+    | (($injector: ng.InjectorService) => import("./interface.ts").AnimateJsFn)
   )[];
 }
 export namespace AnimateJsProvider {

@types/animations/interface.d.ts

@@ -98,4 +98,19 @@ export interface AnimationOptions {
   removeClass?: string;
   to?: Record<string, string | number>;
   tempClasses: string | string[];
+  /** Optional DOM operation callback executed before animation */
+  domOperation?: () => void;
+}
+export interface AnimateJsRunner {
+  $$willAnimate: true;
+  start: () => AnimateRunner;
+  end: () => AnimateRunner;
+}
+export interface AnimateJsFn {
+  (
+    element: HTMLElement,
+    event: string,
+    classes?: string | null,
+    options?: AnimationOptions,
+  ): AnimateJsRunner;
 }

@types/animations/runner/animate-runner.d.ts

@@ -1,95 +1,116 @@
-/**
- * Schedule a callback to run on the next animation frame.
- * Multiple calls within the same frame are batched together.
- *
- * @param {VoidFunction} fn - The callback to execute.
- */
-export function schedule(fn: VoidFunction): void;
-/**
- * Represents an asynchronous animation operation.
- * Provides both callback-based and promise-based completion APIs.
- */
 export class AnimateRunner {
   /**
-   * Run an array of animation runners in sequence.
-   * Each runner waits for the previous one to complete.
+   * Executes a list of runners sequentially.
+   * Each must complete before the next starts.
    *
-   * @param {AnimateRunner[]} runners - Runners to execute in order.
-   * @param {(ok: boolean) => void} callback - Invoked when all complete or one fails.
+   * @param {AnimateRunner[]} runners
+   * @param {(ok: boolean) => void} callback
    */
   static _chain(
     runners: AnimateRunner[],
     callback: (ok: boolean) => void,
   ): void;
   /**
-   * Waits for all animation runners to complete before invoking the callback.
+   * Waits until all runners complete.
    *
-   * @param {AnimateRunner[]} runners - Active runners to wait for.
-   * @param {(ok: boolean) => void} callback - Called when all runners complete.
+   * @param {AnimateRunner[]} runners
+   * @param {(ok: boolean) => void} callback
    */
   static _all(runners: AnimateRunner[], callback: (ok: boolean) => void): void;
   /**
-   * @param {import("../interface.ts").AnimationHost} [host] - Optional animation host.
+   * @param {AnimationHost} [host] - Optional animation host callbacks.
+   * @param {boolean} [jsAnimation=false]
+   *        If true: use RAF/timer ticks.
+   *        If false: use batched CSS animation ticks.
    */
-  constructor(host?: import("../interface.ts").AnimationHost);
-  /** @type {import("../interface.ts").AnimationHost} */
-  _host: import("../interface.ts").AnimationHost;
+  constructor(host?: AnimationHost, jsAnimation?: boolean);
+  /** @type {AnimationHost} */
+  _host: AnimationHost;
   /** @type {Array<(ok: boolean) => void>} */
   _doneCallbacks: Array<(ok: boolean) => void>;
   /** @type {RunnerState} */
   _state: RunnerState;
-  /** @type {Promise<void>|null} */
-  _promise: Promise<void> | null;
-  /** @type {(fn: VoidFunction) => void} */
-  _schedule: (fn: VoidFunction) => void;
   /**
-   * Sets or updates the animation host.
-   * @param {import("../interface.ts").AnimationHost} host - The host object.
+   * Deferred promise used by .then/.catch/.finally.
+   * @type {Promise<void>|null}
+   * @private
+   */
+  private _promise;
+  _tick: (fn: any) => void;
+  /**
+   * Sets or replaces the current host.
+   * @param {AnimationHost} host
    */
-  setHost(host: import("../interface.ts").AnimationHost): void;
+  setHost(host: AnimationHost): void;
   /**
-   * Registers a callback to be called once the animation completes.
-   * If the animation is already complete, it's called immediately.
+   * Register a completion callback.
+   * Fires immediately if animation is already done.
    *
-   * @param {(ok: boolean) => void} fn - Completion callback.
+   * @param {(ok: boolean) => void} fn
    */
   done(fn: (ok: boolean) => void): void;
   /**
-   * Notifies the host of animation progress.
-   * @param {...any} args - Progress arguments.
+   * Reports progress to host.
+   * @param {...any} args
    */
   progress(...args: any[]): void;
-  /** Pauses the animation, if supported by the host. */
+  /** Pause underlying animation (if supported). */
   pause(): void;
-  /** Resumes the animation, if supported by the host. */
+  /** Resume underlying animation (if supported). */
   resume(): void;
-  /** Ends the animation successfully. */
+  /**
+   * Ends the animation successfully.
+   * Equivalent to user choosing to finish it immediately.
+   */
   end(): void;
-  /** Cancels the animation. */
-  cancel(): void;
   /**
-   * Marks the animation as complete on the next animation frame.
-   * @param {boolean} [status=true] - True if successful, false if canceled.
+   * Cancels the animation.
    */
-  complete(status?: boolean): void;
+  cancel(): void;
   /**
-   * Returns a promise that resolves or rejects when the animation completes.
-   * @returns {Promise<void>} Promise resolved on success or rejected on cancel.
+   * Schedule animation completion.
+   *
+   * @param {boolean} [status=true]
    */
-  getPromise(): Promise<void>;
-  /** @inheritdoc */
-  then(onFulfilled: any, onRejected: any): Promise<void>;
-  /** @inheritdoc */
-  catch(onRejected: any): Promise<void>;
-  /** @inheritdoc */
-  finally(onFinally: any): Promise<void>;
+  complete(status?: boolean): void;
   /**
    * Completes the animation and invokes all done callbacks.
+   * @param {boolean} status
    * @private
-   * @param {boolean} status - True if completed successfully, false if canceled.
    */
   private _finish;
+  /**
+   * Returns an internal promise that resolves on success,
+   * and rejects on cancel.
+   *
+   * @returns {Promise<void>}
+   */
+  getPromise(): Promise<void>;
+  /**
+   * Standard "thenable" interface
+   * @template T
+   * @param {(value: void) => T|Promise<T>} onFulfilled
+   * @param {(reason: any) => any} [onRejected]
+   * @returns {Promise<T>}
+   */
+  then<T>(
+    onFulfilled: (value: void) => T | Promise<T>,
+    onRejected?: (reason: any) => any,
+  ): Promise<T>;
+  /**
+   * Standard promise catcher.
+   * @param {(reason: any) => any} onRejected
+   * @returns {Promise<void>}
+   */
+  catch(onRejected: (reason: any) => any): Promise<void>;
+  /**
+   * Standard promise finally.
+   * @param {() => any} onFinally
+   * @returns {Promise<void>}
+   */
+  finally(onFinally: () => any): Promise<void>;
 }
+export type AnimationHost = import("../interface.ts").AnimationHost;
 /**
  * Internal runner states.
  */

src/animations/animate-js.html

@@ -6,28 +6,25 @@
 
     <link rel="shortcut icon" type="image/png" href="/images/favicon.ico" />
     <script type="module" src="/src/index.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/anime.min.js"></script>
-    <script>
-      document.addEventListener("DOMContentLoaded", () => {
-        window.angular.module("test", []).animation(".movable", [
-          function () {
-            return {
-              addClass: function (element, className, doneFn) {
-                anime({
-                  targets: element,
-                  translateX: parseInt(className),
-                });
-              },
-              removeClass: function (element, className, doneFn) {},
-              setClass: function (element, className, removedClass, doneFn) {
-                anime({
-                  targets: element,
-                  translateX: parseInt(className),
-                });
-              },
-            };
+    <script src="https://cdn.jsdelivr.net/npm/animejs/dist/bundles/anime.umd.min.js"></script>
+
+    <script type="module">
+      window.angular.module("test", []).animation(".movable", function () {
+        const { animate } = anime;
+        return {
+          addClass(element, className, doneFn) {
+            animate(element, {
+              translateX: parseInt(className),
+              onComplete: doneFn,
+            });
+          },
+          setClass(element, className, removedClass, doneFn) {
+            animate(element, {
+              translateX: parseInt(className),
+              onComplete: doneFn,
+            });
           },
-        ]);
+        };
       });
     </script>