@formkit/auto-animate - npm Package Compare versions

Comparing version 1.0.0-beta.1 to 1.0.0-beta.2

index.d.ts

@@ -11,2 +11,23 @@ /**
 /**
+ * Allows start/stop control of the animation
+ */
+export interface AnimationController {
+    /**
+     * The original animation parent.
+     */
+    readonly parent: Element;
+    /**
+     * A function that enables future animations.
+     */
+    enable: () => void;
+    /**
+     * A function that disables future animations.
+     */
+    disable: () => void;
+    /**
+     * A function that returns true if the animations are currently enabled.
+     */
+    isEnabled: () => boolean;
+}
+/**
  * Returns the width/height that the element should be transitioned between.
@@ -30,2 +51,7 @@ * This takes into account box-sizing.
     easing: "linear" | "ease-in" | "ease-out" | "ease-in-out" | string;
+    /**
+     * Ignore a user’s "reduce motion" setting and enable animations. It is not
+     * recommended to use this.
+     */
+    disrespectUserMotionPreference?: boolean;
 }
@@ -45,3 +71,3 @@ /**
  */
-export default function autoAnimate(el: HTMLElement, config?: Partial<AutoAnimateOptions> | AutoAnimationPlugin): void;
+export default function autoAnimate(el: HTMLElement, config?: Partial<AutoAnimateOptions> | AutoAnimationPlugin): AnimationController;
 /**
@@ -52,5 +78,5 @@ * The vue directive.
     mounted: (el: HTMLElement, binding: {
-        value: Partial<AutoAnimateOptions> | AutoAnimationPlugin;
+        value: Partial<AutoAnimateOptions> | AutoAnimationPlugin | undefined;
     }) => void;
 };
 export {};

index.min.js

@@ -1,1 +0,1 @@
-const e=new Set,t=new WeakMap,n=new WeakMap,o=new WeakMap,i=new WeakMap,a=new WeakMap,r=new WeakMap,s=new WeakMap;let d;const c="__aa_tgt",l="__aa_del",f=e=>{const a=function(e){return e.reduce(((e,t)=>{if(!1===e)return!1;if(t.target instanceof Element){if(b(t.target),!e.has(t.target)){e.add(t.target);for(let n=0;n<t.target.children.length;n++){const o=t.target.children.item(n);if(o){if(l in o)return!1;b(t.target,o),e.add(o)}}}if(t.removedNodes.length)for(let o=0;o<t.removedNodes.length;o++){const i=t.removedNodes[o];if(l in i)return!1;i instanceof Element&&(e.add(i),b(t.target,i),n.set(i,[t.previousSibling,t.nextSibling]))}}return e}),new Set)}(e);a&&a.forEach((e=>function(e){var a;const r=d.contains(e),s=t.has(e);r&&n.has(e)&&n.delete(e);o.has(e)&&(null===(a=o.get(e))||void 0===a||a.cancel());s&&r?function(e){const n=t.get(e),i=y(e);let a;if(!n)return;const r=x(e);if("function"!=typeof r){const t=n.left-i.left,o=n.top-i.top,[s,d,c,l]=M(e,n,i),f={transform:`translate(${t}px, ${o}px)`},u={transform:"translate(0, 0)"};s!==d&&(f.width=`${s}px`,u.width=`${d}px`),c!==l&&(f.height=`${c}px`,u.height=`${l}px`),a=e.animate([f,u],r)}else a=new Animation(r(e,"remain",n,i)),a.play();o.set(e,a),t.set(e,i),a.addEventListener("finish",p.bind(null,e))}(e):s&&!r?function(e){if(!n.has(e)||!t.has(e))return;const[a,r]=n.get(e);Object.defineProperty(e,l,{value:!0}),r&&r.parentNode&&r.parentNode instanceof Element?r.parentNode.insertBefore(e,r):a&&a.parentNode&&a.parentNode.appendChild(e);const[s,d,c,f]=function(e){const n=t.get(e),[o,,i]=M(e,n,y(e));let a=e.parentElement;for(;a&&("static"===getComputedStyle(a).position||a instanceof HTMLBodyElement);)a=a.parentElement;a||(a=document.body);const r=getComputedStyle(a),s=t.get(a)||y(a),d=Math.round(n.top-s.top)-v(r.borderTopWidth),c=Math.round(n.left-s.left)-v(r.borderLeftWidth);return[d,c,o,i]}(e),u=x(e),p=t.get(e);let h;Object.assign(e.style,{position:"absolute",top:`${s}px`,left:`${d}px`,width:`${c}px`,height:`${f}px`,margin:0,pointerEvents:"none",transformOrigin:"center",zIndex:100}),"function"!=typeof u?h=e.animate([{transform:"scale(1)",opacity:1},{transform:"scale(.98)",opacity:0}],{duration:u.duration,easing:"ease-out"}):(h=new Animation(u(e,"remove",p)),h.play());o.set(e,h),h.addEventListener("finish",(()=>{var a;e.remove(),t.delete(e),n.delete(e),o.delete(e),null===(a=i.get(e))||void 0===a||a.disconnect()}))}(e):function(e){const n=y(e);t.set(e,n);const i=x(e);let a;"function"!=typeof i?a=e.animate([{transform:"scale(.98)",opacity:0},{transform:"scale(0.98)",opacity:0,offset:.5},{transform:"scale(1)",opacity:1}],{duration:1.5*i.duration,easing:"ease-in"}):(a=new Animation(i(e,"add",n)),a.play());o.set(e,a),a.addEventListener("finish",p.bind(null,e))}(e)}(e)))},u=n=>{n.forEach((n=>{n.target===d&&(clearTimeout(s.get(d)),s.set(d,setTimeout((()=>{e.forEach((e=>E(e,(e=>g((()=>p(e)))))))}),100))),t.has(n.target)&&p(n.target)}))};function p(e){clearTimeout(s.get(e));const n=x(e),a="function"==typeof n?500:n.duration;s.set(e,setTimeout((()=>{const n=o.get(e);n&&!n.finished||(t.set(e,y(e)),function(e){const n=i.get(e);null==n||n.disconnect();let o=t.get(e),a=0;o||(o=y(e),t.set(e,o));const{offsetWidth:r,offsetHeight:s}=d,c=[o.top-5,r-(o.left+5+o.width),s-(o.top+5+o.height),o.left-5].map((e=>-1*Math.floor(e)+"px")).join(" "),l=new IntersectionObserver((()=>{++a>1&&p(e)}),{root:d,threshold:1,rootMargin:c});l.observe(e),i.set(e,l)}(e))}),a))}function h(e){setTimeout((()=>{a.set(e,setInterval((()=>g(p.bind(null,e))),2e3))}),Math.round(2e3*Math.random()))}function g(e){"function"==typeof requestIdleCallback?requestIdleCallback((()=>e())):requestAnimationFrame((()=>e()))}let m,w;function b(e,t){t||c in e?t&&!(c in t)&&Object.defineProperty(t,c,{value:e}):Object.defineProperty(e,c,{value:e})}function v(e){return Number(e.replace(/[^0-9.\-]/g,""))}function y(e){const t=e.getBoundingClientRect();return{top:t.top+window.scrollY,left:t.left+window.scrollX,width:t.width,height:t.height}}function M(e,t,n){let o=t.width,i=t.height,a=n.width,r=n.height;const s=getComputedStyle(e);if("content-box"===s.getPropertyValue("box-sizing")){const e=v(s.paddingTop)+v(s.paddingBottom)+v(s.borderTopWidth)+v(s.borderBottomWidth),t=v(s.paddingLeft)+v(s.paddingRight)+v(s.borderRightWidth)+v(s.borderLeftWidth);o-=t,a-=t,i-=e,r-=e}return[o,a,i,r].map(Math.round)}function x(e){return c in e&&r.has(e[c])?r.get(e[c]):{duration:250,easing:"ease-in-out"}}function E(e,...t){t.forEach((t=>t(e,r.has(e))));for(let n=0;n<e.children.length;n++){const o=e.children.item(n);o&&t.forEach((e=>e(o,r.has(o))))}}function W(t,n={}){if(m&&w){if(window.matchMedia("(prefers-reduced-motion: reduce)").matches)return;"static"===getComputedStyle(t).position&&Object.assign(t.style,{position:"relative"}),E(t,p,h,(e=>null==w?void 0:w.observe(e))),"function"==typeof n?r.set(t,n):r.set(t,{duration:250,easing:"ease-in-out",...n}),m.observe(t,{childList:!0}),e.add(t)}}"undefined"!=typeof window&&(d=document.documentElement,m=new MutationObserver(f),w=new ResizeObserver(u),w.observe(d));const $={mounted:(e,t)=>{W(e,t.value||{})}};export{W as default,M as getTransitionSizes,$ as vAutoAnimate};
+const e=new Set,t=new WeakMap,n=new WeakMap,o=new WeakMap,i=new WeakMap,a=new WeakMap,r=new WeakMap,s=new WeakMap,d=new WeakSet;let c;const l="__aa_tgt",f="__aa_del",u=e=>{const a=function(e){return e.reduce(((e,t)=>{if(!1===e)return!1;if(t.target instanceof Element){if(v(t.target),!e.has(t.target)){e.add(t.target);for(let n=0;n<t.target.children.length;n++){const o=t.target.children.item(n);if(o){if(f in o)return!1;v(t.target,o),e.add(o)}}}if(t.removedNodes.length)for(let o=0;o<t.removedNodes.length;o++){const i=t.removedNodes[o];if(f in i)return!1;i instanceof Element&&(e.add(i),v(t.target,i),n.set(i,[t.previousSibling,t.nextSibling]))}}return e}),new Set)}(e);a&&a.forEach((e=>function(e){var a;const r=c.contains(e),s=t.has(e);r&&n.has(e)&&n.delete(e);o.has(e)&&(null===(a=o.get(e))||void 0===a||a.cancel());s&&r?function(e){const n=t.get(e),i=M(e);if(!k(e))return t.set(e,i);let a;if(!n)return;const r=x(e);if("function"!=typeof r){const t=n.left-i.left,o=n.top-i.top,[s,d,c,l]=E(e,n,i),f={transform:`translate(${t}px, ${o}px)`},u={transform:"translate(0, 0)"};s!==d&&(f.width=`${s}px`,u.width=`${d}px`),c!==l&&(f.height=`${c}px`,u.height=`${l}px`),a=e.animate([f,u],{duration:r.duration,easing:r.easing})}else a=new Animation(r(e,"remain",n,i)),a.play();o.set(e,a),t.set(e,i),a.addEventListener("finish",h.bind(null,e))}(e):s&&!r?function(e){var a;if(!n.has(e)||!t.has(e))return;const[r,s]=n.get(e);Object.defineProperty(e,f,{value:!0}),s&&s.parentNode&&s.parentNode instanceof Element?s.parentNode.insertBefore(e,s):r&&r.parentNode?r.parentNode.appendChild(e):null===(a=W(e))||void 0===a||a.appendChild(e);function d(){var a;e.remove(),t.delete(e),n.delete(e),o.delete(e),null===(a=i.get(e))||void 0===a||a.disconnect()}if(!k(e))return d();const[c,l,u,p]=function(e){const n=t.get(e),[o,,i]=E(e,n,M(e));let a=e.parentElement;for(;a&&("static"===getComputedStyle(a).position||a instanceof HTMLBodyElement);)a=a.parentElement;a||(a=document.body);const r=getComputedStyle(a),s=t.get(a)||M(a),d=Math.round(n.top-s.top)-y(r.borderTopWidth),c=Math.round(n.left-s.left)-y(r.borderLeftWidth);return[d,c,o,i]}(e),h=x(e),g=t.get(e);let m;Object.assign(e.style,{position:"absolute",top:`${c}px`,left:`${l}px`,width:`${u}px`,height:`${p}px`,margin:0,pointerEvents:"none",transformOrigin:"center",zIndex:100}),"function"!=typeof h?m=e.animate([{transform:"scale(1)",opacity:1},{transform:"scale(.98)",opacity:0}],{duration:h.duration,easing:"ease-out"}):(m=new Animation(h(e,"remove",g)),m.play());o.set(e,m),m.addEventListener("finish",d)}(e):function(e){const n=M(e);t.set(e,n);const i=x(e);if(!k(e))return;let a;"function"!=typeof i?a=e.animate([{transform:"scale(.98)",opacity:0},{transform:"scale(0.98)",opacity:0,offset:.5},{transform:"scale(1)",opacity:1}],{duration:1.5*i.duration,easing:"ease-in"}):(a=new Animation(i(e,"add",n)),a.play());o.set(e,a),a.addEventListener("finish",h.bind(null,e))}(e)}(e)))},p=n=>{n.forEach((n=>{n.target===c&&(clearTimeout(s.get(c)),s.set(c,setTimeout((()=>{e.forEach((e=>O(e,(e=>m((()=>h(e)))))))}),100))),t.has(n.target)&&h(n.target)}))};function h(e){clearTimeout(s.get(e));const n=x(e),a="function"==typeof n?500:n.duration;s.set(e,setTimeout((async()=>{const n=o.get(e);n&&!await n.finished||(t.set(e,M(e)),function(e){const n=i.get(e);null==n||n.disconnect();let o=t.get(e),a=0;o||(o=M(e),t.set(e,o));const{offsetWidth:r,offsetHeight:s}=c,d=[o.top-5,r-(o.left+5+o.width),s-(o.top+5+o.height),o.left-5].map((e=>-1*Math.floor(e)+"px")).join(" "),l=new IntersectionObserver((()=>{++a>1&&h(e)}),{root:c,threshold:1,rootMargin:d});l.observe(e),i.set(e,l)}(e))}),a))}function g(e){setTimeout((()=>{a.set(e,setInterval((()=>m(h.bind(null,e))),2e3))}),Math.round(2e3*Math.random()))}function m(e){"function"==typeof requestIdleCallback?requestIdleCallback((()=>e())):requestAnimationFrame((()=>e()))}let b,w;function v(e,t){t||l in e?t&&!(l in t)&&Object.defineProperty(t,l,{value:e}):Object.defineProperty(e,l,{value:e})}function y(e){return Number(e.replace(/[^0-9.\-]/g,""))}function M(e){const t=e.getBoundingClientRect();return{top:t.top+window.scrollY,left:t.left+window.scrollX,width:t.width,height:t.height}}function E(e,t,n){let o=t.width,i=t.height,a=n.width,r=n.height;const s=getComputedStyle(e);if("content-box"===s.getPropertyValue("box-sizing")){const e=y(s.paddingTop)+y(s.paddingBottom)+y(s.borderTopWidth)+y(s.borderBottomWidth),t=y(s.paddingLeft)+y(s.paddingRight)+y(s.borderRightWidth)+y(s.borderLeftWidth);o-=t,a-=t,i-=e,r-=e}return[o,a,i,r].map(Math.round)}function x(e){return l in e&&r.has(e[l])?r.get(e[l]):{duration:250,easing:"ease-in-out"}}function W(e){if(l in e)return e[l]}function k(e){const t=W(e);return!!t&&d.has(t)}function O(e,...t){t.forEach((t=>t(e,r.has(e))));for(let n=0;n<e.children.length;n++){const o=e.children.item(n);o&&t.forEach((e=>e(o,r.has(o))))}}function $(t,n={}){if(b&&w){window.matchMedia("(prefers-reduced-motion: reduce)").matches&&"function"!=typeof n&&!n.disrespectUserMotionPreference||(d.add(t),"static"===getComputedStyle(t).position&&Object.assign(t.style,{position:"relative"}),O(t,h,g,(e=>null==w?void 0:w.observe(e))),"function"==typeof n?r.set(t,n):r.set(t,{duration:250,easing:"ease-in-out",...n}),b.observe(t,{childList:!0}),e.add(t))}return Object.freeze({parent:t,enable:()=>{d.add(t)},disable:()=>{d.delete(t)},isEnabled:()=>d.has(t)})}"undefined"!=typeof window&&(c=document.documentElement,b=new MutationObserver(u),w=new ResizeObserver(p),w.observe(c));const C={mounted:(e,t)=>{$(e,t.value||{})}};export{$ as default,E as getTransitionSizes,C as vAutoAnimate};

package.json

 {
   "name": "@formkit/auto-animate",
-  "version": "1.0.0-beta.1",
+  "version": "1.0.0-beta.2",
   "description": "Add motion to your apps with a single line of code.",
@@ -9,3 +9,5 @@ "keywords": [
     "react",
-    "vue"
+    "vue",
+    "angular",
+    "svelte"
   ],
@@ -28,2 +30,6 @@ "type": "module",
     },
+    "./angular": {
+      "import": "./angular/index.mjs",
+      "types": "./angular/index.d.ts"
+    },
     ".": {
@@ -33,15 +39,3 @@ "import": "./index.mjs"
   },
-  "dependencies": {},
-  "peerDependencies": {
-    "react": "^16.8.0",
-    "vue": "^3.0.0"
-  },
-  "peerDependenciesMeta": {
-    "vue": {
-      "optional": true
-    },
-    "react": {
-      "optional": true
-    }
-  }
+  "dependencies": {}
 }

react/index.d.ts

@@ -8,2 +8,2 @@ import { RefObject } from "react";
  */
-export declare function useAutoAnimate<T extends Element>(options?: Partial<AutoAnimateOptions> | AutoAnimationPlugin): [RefObject<T>];
+export declare function useAutoAnimate<T extends Element>(options?: Partial<AutoAnimateOptions> | AutoAnimationPlugin): [RefObject<T>, (enabled: boolean) => void];

README.md

@@ -9,4 +9,10 @@ <img width="300" height="37" alt="AutoAnimate Logo" src="https://cdn.formk.it/web-assets/logo-auto-animate.svg" >
 
-<a href="https://auto-animate.formkit.com"><img width="180" height="42" src="https://cdn.formk.it/web-assets/read-docs-auto-animate.svg" alt="Examples & Docs"></a>
+<a href="https://auto-animate.formkit.com"><img width="180" height="42" src="https://cdn.formk.it/web-assets/read-docs-auto-animate-v2.svg" alt="Examples & Docs"></a>
 
+With one line of code, you can improve your interfaces, for example:
+
+<a href="https://auto-animate.formkit.com">
+  <img src="https://cdn.formk.it/web-assets/motion.gif" alt="Simple example of AutoAnimation motion">
+</a>
+
 ## Installation
@@ -17,7 +23,7 @@
 ```bash
-#yarn
+# yarn
 yarn add @formkit/auto-animate
-#npm
+# npm
 npm install @formkit/auto-animate
-#pnpm
+# pnpm
 pnpm add @formkit/auto-animate
@@ -45,1 +51,5 @@ ```
 Please consider [supporting us with a recurring or one-time donation](https://github.com/sponsors/formkit)! 🙏
+
+## Contributing
+
+Thank you for your willingness to contribute to this free and open source project! When contributing, consider first discussing your desired change with the core team via <a href="https://github.com/formkit/auto-animate/issues">GitHub issues</a>, <a href="https://discord.gg/SHYT8pyeNm">Discord</a>, or other method.

vue/index.d.ts

@@ -1,2 +0,10 @@
-import type { Plugin } from "vue";
+import { Plugin, Ref } from "vue";
+import { AutoAnimateOptions, AutoAnimationPlugin } from "../index";
 export declare const autoAnimatePlugin: Plugin;
+/**
+ * AutoAnimate hook for adding dead-simple transitions and animations to Vue.
+ * @param options - Auto animate options or a plugin
+ * @returns A template ref. Use the `ref` attribute of your parent element
+ * to store the element in this template ref.
+ */
+export declare function useAutoAnimate<T extends Element>(options?: Partial<AutoAnimateOptions> | AutoAnimationPlugin): [Ref<T>, (enabled: boolean) => void];

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

34647

increased by25.79%

Dependency count

0

decreased by-100%

Number of package files

12

increased by20%

Lines of code

778

increased by28.38%

Number of lines in readme file

53

increased by23.26%

No dependency changes