crossani - npm Package Compare versions

Comparing version 1.3.2 to 1.3.3

dist/bundle.js

@@ -32,3 +32,5 @@ "use strict";
   }
-  var generateTransition = (state) => Array.from(state.running.values()).map(([ms, prop, ease]) => `${prop} ${ms ?? state.lastMs}ms ${ease ?? state.lastEase}`).join(",");
+  var generateTransition = (state) => Array.from(state.running.values()).map(
+    ([ms, prop, ease]) => `${prop} ${ms ?? state.lastMs}ms ${ease ?? state.lastEase}`
+  ).join(",");
 
@@ -99,3 +101,5 @@ // src/shared.ts
   var whenTransitionAborts = (elem, callback) => {
-    const animateOnceStopped = () => requestAnimationFrame(elem.style.transitionProperty === "none" ? () => void callback() : animateOnceStopped);
+    const animateOnceStopped = () => requestAnimationFrame(
+      elem.style.transitionProperty === "none" ? () => void callback() : animateOnceStopped
+    );
     requestAnimationFrame(animateOnceStopped);
@@ -170,3 +174,5 @@ };
     if (!trans)
-      throw new Error(`${this.tagName} #${this.id} has no transition "${transOrName}"`);
+      throw new Error(
+        `${this.tagName} #${this.id} has no transition "${transOrName}"`
+      );
     if (trans.cutOff) {
@@ -200,2 +206,7 @@ abortAnimation(this);
   };
+  SVGElement.prototype.caSet = HTMLElement.prototype.caSet = function(prop, value) {
+    const store = getOrInitStore(this);
+    store.curr[prop] = value;
+    updateStyles(this);
+  };
   var unload = () => {
@@ -202,0 +213,0 @@ for (const elem of stateStore.keys())

dist/cjs/index.js

@@ -34,3 +34,5 @@ "use strict";
   if (!trans)
-    throw new Error(`${this.tagName} #${this.id} has no transition "${transOrName}"`);
+    throw new Error(
+      `${this.tagName} #${this.id} has no transition "${transOrName}"`
+    );
   if (trans.cutOff) {
@@ -64,2 +66,7 @@ (0, import_animator.abortAnimation)(this);
 };
+SVGElement.prototype.caSet = HTMLElement.prototype.caSet = function(prop, value) {
+  const store = (0, import_util.getOrInitStore)(this);
+  store.curr[prop] = value;
+  (0, import_util.updateStyles)(this);
+};
 const unload = () => {
@@ -66,0 +73,0 @@ for (const elem of import_shared.stateStore.keys())

dist/cjs/transCssManager.js

@@ -55,2 +55,4 @@ "use strict";
 }
-const generateTransition = (state) => Array.from(state.running.values()).map(([ms, prop, ease]) => `${prop} ${ms ?? state.lastMs}ms ${ease ?? state.lastEase}`).join(",");
+const generateTransition = (state) => Array.from(state.running.values()).map(
+  ([ms, prop, ease]) => `${prop} ${ms ?? state.lastMs}ms ${ease ?? state.lastEase}`
+).join(",");

dist/cjs/util.js

@@ -92,4 +92,6 @@ "use strict";
 const whenTransitionAborts = (elem, callback) => {
-  const animateOnceStopped = () => requestAnimationFrame(elem.style.transitionProperty === "none" ? () => void callback() : animateOnceStopped);
+  const animateOnceStopped = () => requestAnimationFrame(
+    elem.style.transitionProperty === "none" ? () => void callback() : animateOnceStopped
+  );
   requestAnimationFrame(animateOnceStopped);
 };

dist/esm/index.js

@@ -45,2 +45,8 @@ import { abortAnimation, popAll, startAnimating } from "./animator";
     };
+SVGElement.prototype.caSet = HTMLElement.prototype.caSet =
+    function (prop, value) {
+        const store = getOrInitStore(this);
+        store.curr[prop] = value;
+        updateStyles(this);
+    };
 export const unload = () => {
@@ -47,0 +53,0 @@ for (const elem of stateStore.keys())

dist/types/types.d.ts

@@ -44,3 +44,5 @@ /** Represents a transition that may run on an element at any given time */
         forcePop(): Promise<void>;
+        /** Sets a `style` property, updating it in crossani's copy too */
+        caSet(prop: string, value: string): void;
     }
 }

package.json

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

README.md

@@ -49,5 +49,9 @@ # CrossAni
 
-You can prevent this behaviour by calling `element.removeCrossAni()` after an animation.
-This will remove any residual styles from transitions, but leave your `transitions `intact.
+You can deal with this by using the `element.caSet(prop, value)` function.
+This will let you set a value on the inline styles without conflicting with CrossAni,
+however do note that styles set this way are removed when `removeCrossAni()` is called.
 
+You can prevent overwrites by calling `element.removeCrossAni()` after an animation.
+This will remove any residual styles from transitions, but leave your `transitions` prop intact.
+
 You can then modify the styles, and call `doTransition` as usual, re-initing that elem's animations
@@ -222,5 +226,5 @@
 |              |            SolidJS | ✅ +0.25kb |  ✅ +2kb  |    ❌    |     ❌     |
-|              |             Vue.js |     ❌     |  ✅ +1kb  |    ❌    |     ❌     |
+|              |             Vue.js | ✅ +0.6kb  |  ✅ +1kb  |    ❌    |     ❌     |
 |              |             Svelte | ✅ +0.4kb  |    ❌     |    ❌    |     ❌     |
 
 _\* must have the same number of points (Path morphing in AnimeJS)_

No alert changes

Improved metrics

Total package byte prevSize

45569

increased by2.31%

Lines of code

936

increased by3.31%

Number of lines in readme file

228

increased by1.79%

No dependency changes