crossani - npm Package Compare versions

Comparing version 1.3.1 to 1.3.2

dist/bundle.js

@@ -0,1 +1,2 @@
+"use strict";
 (() => {
@@ -21,3 +22,6 @@ // src/transCssManager.ts
   function updateTransition(state, trans) {
-    for (const prop in trans.state)
+    for (const prop of [
+      ...Object.keys(trans.state ?? {}),
+      ...trans.reset ? state.running.keys() : []
+    ])
       state.running.set(prop, [
@@ -95,3 +99,3 @@ trans.ms ?? state.lastMs,
   var whenTransitionAborts = (elem, callback) => {
-    const animateOnceStopped = () => requestAnimationFrame(elem.style.transitionProperty === "none" ? callback : animateOnceStopped);
+    const animateOnceStopped = () => requestAnimationFrame(elem.style.transitionProperty === "none" ? () => void callback() : animateOnceStopped);
     requestAnimationFrame(animateOnceStopped);
@@ -181,3 +185,7 @@ };
   SVGElement.prototype.forcePop = HTMLElement.prototype.forcePop = function() {
-    popAll(this);
+    return new Promise((res) => {
+      abortAnimation(this);
+      popAll(this);
+      whenTransitionAborts(this, res);
+    });
   };
@@ -184,0 +192,0 @@ SVGElement.prototype.removeCrossAni = HTMLElement.prototype.removeCrossAni = function() {

dist/cjs/animator.js

@@ -0,1 +1,2 @@
+"use strict";
 var __defProp = Object.defineProperty;
@@ -2,0 +3,0 @@ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;

dist/cjs/browser.js

@@ -0,1 +1,2 @@
+"use strict";
 var import__ = require(".");
@@ -2,0 +3,0 @@ var import_transCssManager = require("./transCssManager");

dist/cjs/index.js

@@ -0,1 +1,2 @@
+"use strict";
 var __defProp = Object.defineProperty;
@@ -48,3 +49,7 @@ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 SVGElement.prototype.forcePop = HTMLElement.prototype.forcePop = function() {
-  (0, import_animator.popAll)(this);
+  return new Promise((res) => {
+    (0, import_animator.abortAnimation)(this);
+    (0, import_animator.popAll)(this);
+    (0, import_util.whenTransitionAborts)(this, res);
+  });
 };
@@ -51,0 +56,0 @@ SVGElement.prototype.removeCrossAni = HTMLElement.prototype.removeCrossAni = function() {

dist/cjs/queue.js

@@ -0,1 +1,2 @@
+"use strict";
 var __defProp = Object.defineProperty;
@@ -2,0 +3,0 @@ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;

dist/cjs/shared.js

@@ -0,1 +1,2 @@
+"use strict";
 var __defProp = Object.defineProperty;
@@ -2,0 +3,0 @@ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;

dist/cjs/transCssManager.js

@@ -0,1 +1,2 @@
+"use strict";
 var __defProp = Object.defineProperty;
@@ -44,3 +45,6 @@ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 function updateTransition(state, trans) {
-  for (const prop in trans.state)
+  for (const prop of [
+    ...Object.keys(trans.state ?? {}),
+    ...trans.reset ? state.running.keys() : []
+  ])
     state.running.set(prop, [
@@ -47,0 +51,0 @@ trans.ms ?? state.lastMs,

dist/cjs/types.js

@@ -0,1 +1,2 @@
+"use strict";
 var __defProp = Object.defineProperty;
@@ -2,0 +3,0 @@ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;

dist/cjs/util.js

@@ -0,1 +1,2 @@
+"use strict";
 var __defProp = Object.defineProperty;
@@ -91,4 +92,4 @@ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 const whenTransitionAborts = (elem, callback) => {
-  const animateOnceStopped = () => requestAnimationFrame(elem.style.transitionProperty === "none" ? callback : animateOnceStopped);
+  const animateOnceStopped = () => requestAnimationFrame(elem.style.transitionProperty === "none" ? () => void callback() : animateOnceStopped);
   requestAnimationFrame(animateOnceStopped);
 };

dist/esm/index.js

@@ -29,6 +29,9 @@ import { abortAnimation, popAll, startAnimating } from "./animator";
     };
-SVGElement.prototype.forcePop = HTMLElement.prototype.forcePop =
-    function () {
+SVGElement.prototype.forcePop = HTMLElement.prototype.forcePop = function () {
+    return new Promise((res) => {
+        abortAnimation(this);
         popAll(this);
-    };
+        whenTransitionAborts(this, res);
+    });
+};
 SVGElement.prototype.removeCrossAni = HTMLElement.prototype.removeCrossAni =
@@ -35,0 +38,0 @@ function () {

dist/esm/transCssManager.js

@@ -27,3 +27,6 @@ export const EASE = {
 export function updateTransition(state, trans) {
-    for (const prop in trans.state)
+    for (const prop of [
+        ...Object.keys(trans.state ?? {}),
+        ...(trans.reset ? state.running.keys() : []),
+    ])
         state.running.set(prop, [
@@ -30,0 +33,0 @@ trans.ms ?? state.lastMs,

dist/esm/util.js

@@ -75,4 +75,4 @@ import { EASE } from "./transCssManager";
     // see comment above usage in index.ts
-    const animateOnceStopped = () => requestAnimationFrame(elem.style.transitionProperty === "none" ? callback : animateOnceStopped);
+    const animateOnceStopped = () => requestAnimationFrame(elem.style.transitionProperty === "none" ? () => void callback() : animateOnceStopped);
     requestAnimationFrame(animateOnceStopped);
 };

dist/types/types.d.ts

@@ -43,4 +43,4 @@ /** Represents a transition that may run on an element at any given time */
         /** Stops currently running animations */
-        forcePop(): void;
+        forcePop(): Promise<void>;
     }
 }

package.json

 {
   "name": "crossani",
-  "version": "1.3.1",
+  "version": "1.3.2",
   "description": "A silky smooth declarative animation library for the web.",
@@ -5,0 +5,0 @@ "main": "dist/cjs/index.js",

README.md

@@ -174,51 +174,52 @@ # CrossAni
 
-|              |            Feature | CrossAni |  Motion  | AnimeJS | Greensock |
-|--------------|-------------------:|:--------:|:--------:|:-------:|:---------:|
-| **Values**   |    CSS `transform` |    ✅     |    ✅     |    ❌    |     ✅     |
-|              |      Named colours |    ✅     |    ✅     |    ❌    |  Partial  |
-|              |   Colour type conv |    ✅     |    ✅     |    ✅    |     ✅     |
-|              |   To/from CSS vars |    ✅     |    ✅     |    ❌    |     ❌     |
-|              |  To/from CSS funcs |    ✅     |    ✅     |    ❌    |     ❌     |
-|              |   Animate CSS vars |    ❌     |    ✅     |    ❌    |     ❌     |
-|              |   Simple keyframes |  ❌ WIP   |    ✅     |    ✅    |     ❌     |
-|              | Wildcard keyframes |   N/A    |    ✅     |    ❌    |     ❌     |
-|              |    Relative values |    ❌     |    ✅     |    ❌    |     ❌     |
-| **Output**   |     Element styles |    ✅     |    ✅     |    ✅    |     ✅     |
-|              |      Element attrs |    ❌     |    ❌     |    ✅    |     ✅     |
-|              |  Custom animations |    ❌     |    ✅     |    ✅    |     ✅     |
-| **Options**  |           Duration |    ✅     |    ✅     |    ✅    |     ✅     |
-|              |          Direction |    ✅     |    ✅     |    ✅    |     ✅     |
-|              |             Repeat |    ❌     |    ✅     |    ✅    |     ✅     |
-|              |              Delay |    ❌     |    ✅     |    ✅    |     ✅     |
-|              |          End delay |    ❌     |    ✅     |    ✅    |     ✅     |
-|              |       Repeat delay |    ❌     |    ✅     |    ❌    |     ✅     |
-| **Stagger**  |            Stagger |    ❌     | ✅ +.1kb  |    ✅    |     ✅     |
-| **Timeline** |           Timeline |    ❌     | ✅ +.6kb  |    ✅    |     ✅     |
-| **Controls** |               Play |    ✅     |    ✅     |    ✅    |     ✅     |
-|              |              Pause |    ❌     |    ✅     |    ✅    |     ✅     |
-|              |             Finish |    ❌     |    ✅     |    ✅    |     ✅     |
-|              |            Reverse |    ❌     |    ✅     |    ✅    |     ✅     |
-|              |               Stop |    ❌     |    ✅     |    ✅    |     ✅     |
-|              |      Playback rate |    ❌     |    ✅     |    ✅    |     ✅     |
-| **Easing**   |             Linear |    ✅     |    ✅     |    ✅    |     ✅     |
-|              |       Cubic bezier |    ✅     |    ✅     |    ✅    |     ✅     |
-|              |              Steps |    ✅     |    ✅     |    ✅    |     ✅     |
-|              |            Springs | ✅ +1.2kb |  ✅ +1kb  |    ✅    |     ❌     |
-|              |              Glide |    ❌     | ✅ +1.3kb |    ❌    | ✅ $99/yr  |
-|              |   Custom easing fn |    ❌     |    ❌     |    ✅    |     ✅     |
-| **Events**   |           Complete |    ✅     |    ✅     |    ✅    |     ✅     |
-|              |             Cancel |    ^     |    ✅     |    ✅    |     ✅     |
-|              |              Start |    ❌     |    ❌     |    ✅    |     ✅     |
-|              |             Update |    ❌     |    ❌     |    ✅    |     ✅     |
-|              |             Repeat |   N/A    |    ❌     |    ✅    |     ✅     |
-| **Path**     |        Motion path |    ❌     |    ✅     |    ✅    | ✅ +9.5kb  |
-|              |      Path morphing |    ❌     | ✅ (lib)  |   ✅ *   | ✅ $99/yr  |
-|              |       Path drawing |    ✅     |    ✅     |    ✅    | ✅ $99/yr  |
-| **Other**    |            license |   MIT    |   MIT    |   MIT   |  Custom   |
-|              |   GPU acceleration |    ✅     |    ✅     |    ❌    |     ❌     |
-|              |          IE11 (ew) |    ❌     |    ❌     |    ✅    |     ✅     |
-|              |            ReactJS | ✅ +127b  |    ❌     |    ❌    |     ❌     |
-|              |            SolidJS | ✅ +258b  |  ✅ +2kb  |    ❌    |     ❌     |
-|              |             Vue.js |    ❌     |  ✅ +1kb  |    ❌    |     ❌     |
+|              |            Feature | CrossAni  |  Motion  | AnimeJS | Greensock |
+|--------------|-------------------:|:---------:|:--------:|:-------:|:---------:|
+| **Values**   |    CSS `transform` |     ✅     |    ✅     |    ❌    |     ✅     |
+|              |      Named colours |     ✅     |    ✅     |    ❌    |  Partial  |
+|              |   Colour type conv |     ✅     |    ✅     |    ✅    |     ✅     |
+|              |   To/from CSS vars |     ✅     |    ✅     |    ❌    |     ❌     |
+|              |  To/from CSS funcs |     ✅     |    ✅     |    ❌    |     ❌     |
+|              |   Animate CSS vars |     ❌     |    ✅     |    ❌    |     ❌     |
+|              |   Simple keyframes |   ❌ WIP   |    ✅     |    ✅    |     ❌     |
+|              | Wildcard keyframes |    N/A    |    ✅     |    ❌    |     ❌     |
+|              |    Relative values |     ❌     |    ✅     |    ❌    |     ❌     |
+| **Output**   |     Element styles |     ✅     |    ✅     |    ✅    |     ✅     |
+|              |      Element attrs |     ❌     |    ❌     |    ✅    |     ✅     |
+|              |  Custom animations |     ❌     |    ✅     |    ✅    |     ✅     |
+| **Options**  |           Duration |     ✅     |    ✅     |    ✅    |     ✅     |
+|              |          Direction |     ✅     |    ✅     |    ✅    |     ✅     |
+|              |             Repeat |     ❌     |    ✅     |    ✅    |     ✅     |
+|              |              Delay |     ❌     |    ✅     |    ✅    |     ✅     |
+|              |          End delay |     ❌     |    ✅     |    ✅    |     ✅     |
+|              |       Repeat delay |     ❌     |    ✅     |    ❌    |     ✅     |
+| **Stagger**  |            Stagger |     ❌     | ✅ +.1kb  |    ✅    |     ✅     |
+| **Timeline** |           Timeline |     ❌     | ✅ +.6kb  |    ✅    |     ✅     |
+| **Controls** |               Play |     ✅     |    ✅     |    ✅    |     ✅     |
+|              |              Pause |     ❌     |    ✅     |    ✅    |     ✅     |
+|              |             Finish |     ❌     |    ✅     |    ✅    |     ✅     |
+|              |            Reverse |     ❌     |    ✅     |    ✅    |     ✅     |
+|              |               Stop |     ❌     |    ✅     |    ✅    |     ✅     |
+|              |      Playback rate |     ❌     |    ✅     |    ✅    |     ✅     |
+| **Easing**   |             Linear |     ✅     |    ✅     |    ✅    |     ✅     |
+|              |       Cubic bezier |     ✅     |    ✅     |    ✅    |     ✅     |
+|              |              Steps |     ✅     |    ✅     |    ✅    |     ✅     |
+|              |            Springs | ✅ +1.2kb  |  ✅ +1kb  |    ✅    |     ❌     |
+|              |              Glide |     ❌     | ✅ +1.3kb |    ❌    | ✅ $99/yr  |
+|              |   Custom easing fn |     ❌     |    ❌     |    ✅    |     ✅     |
+| **Events**   |           Complete |     ✅     |    ✅     |    ✅    |     ✅     |
+|              |             Cancel |     ^     |    ✅     |    ✅    |     ✅     |
+|              |              Start |     ❌     |    ❌     |    ✅    |     ✅     |
+|              |             Update |     ❌     |    ❌     |    ✅    |     ✅     |
+|              |             Repeat |    N/A    |    ❌     |    ✅    |     ✅     |
+| **Path**     |        Motion path |     ❌     |    ✅     |    ✅    | ✅ +9.5kb  |
+|              |      Path morphing |     ❌     | ✅ (lib)  |   ✅ *   | ✅ $99/yr  |
+|              |       Path drawing |     ✅     |    ✅     |    ✅    | ✅ $99/yr  |
+| **Other**    |            license |    MIT    |   MIT    |   MIT   |  Custom   |
+|              |   GPU acceleration |     ✅     |    ✅     |    ❌    |     ❌     |
+|              |          IE11 (ew) |     ❌     |    ❌     |    ✅    |     ✅     |
+|              |            ReactJS | ✅ +0.1kb  |    ❌     |    ❌    |     ❌     |
+|              |            SolidJS | ✅ +0.25kb |  ✅ +2kb  |    ❌    |     ❌     |
+|              |             Vue.js |     ❌     |  ✅ +1kb  |    ❌    |     ❌     |
+|              |             Svelte | ✅ +0.4kb  |    ❌     |    ❌    |     ❌     |
 
 _\* must have the same number of points (Path morphing in AnimeJS)_

No alert changes

Improved metrics

Total package byte prevSize

44540

increased by2.13%

Lines of code

906

increased by3.31%

Number of lines in readme file

224

increased by0.45%

No dependency changes