@formkit/auto-animate/index.min.js

Add motion to your apps with a single line of code.

const e=new Set,t=new WeakMap,n=new WeakMap,o=new WeakMap,i=new WeakMap,r=new WeakMap,l=new WeakMap,a=new WeakMap,s=new WeakMap,c=new WeakSet;let d,u=0,f=0;const h="__aa_tgt",p="__aa_del",g="__aa_new",m=e=>{const i=function(e){const t=e.reduce((e,t)=>[...e,...Array.from(t.addedNodes),...Array.from(t.removedNodes)],[]);return!t.every(e=>"#comment"===e.nodeName)&&e.reduce((e,t)=>{if(!1===e)return!1;if(t.target instanceof Element){if(_(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(p in o)return!1;_(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(p in i)return!1;i instanceof Element&&(e.add(i),_(t.target,i),n.set(i,[t.previousSibling,t.nextSibling]))}}return e},new Set)}(e);i&&i.forEach(e=>function(e){var i,r;const l=e.isConnected,a=t.has(e);l&&n.has(e)&&n.delete(e);"finished"!==(null===(i=o.get(e))||void 0===i?void 0:i.playState)&&(null===(r=o.get(e))||void 0===r||r.cancel());g in e?$(e):a&&l?function(e){const n=t.get(e),i=O(e);if(!N(e))return t.set(e,i);if(v(e))return t.set(e,i),void y(e);let r;if(!n)return;const l=C(e);if("function"!=typeof l){let t=n.left-i.left,o=n.top-i.top;const a=n.left+n.width-(i.left+i.width);0==n.top+n.height-(i.top+i.height)&&(o=0),0==a&&(t=0);const[s,c,d,u]=S(e,n,i),f={transform:`translate(${t}px, ${o}px)`},h={transform:"translate(0, 0)"};s!==c&&(f.width=`${s}px`,h.width=`${c}px`),d!==u&&(f.height=`${d}px`,h.height=`${u}px`),r=e.animate([f,h],{duration:l.duration,easing:l.easing})}else{const[t]=j(l(e,"remain",n,i));r=new Animation(t),r.play()}o.set(e,r),t.set(e,i),r.addEventListener("finish",b.bind(null,e,!1),{once:!0})}(e):a&&!l?function(e){var i;if(!n.has(e)||!t.has(e))return;const[r,l]=n.get(e);Object.defineProperty(e,p,{value:!0,configurable:!0});const a=window.scrollX,s=window.scrollY;l&&l.parentNode&&l.parentNode instanceof Element?l.parentNode.insertBefore(e,l):r&&r.parentNode?r.parentNode.appendChild(e):null===(i=L(e))||void 0===i||i.appendChild(e);if(!N(e))return A(e);const[c,h,g,m]=function(e){var n;const i=t.get(e),[r,,l]=S(e,i,O(e));let a=e.parentElement;for(;a&&("static"===getComputedStyle(a).position||a instanceof HTMLBodyElement);)a=a.parentElement;a||(a=document.body);const s=getComputedStyle(a),c=o.has(e)&&"finished"!==(null===(n=o.get(e))||void 0===n?void 0:n.playState)?t.get(a):O(a),d=Math.round(i.top-c.top)-T(s.borderTopWidth),u=Math.round(i.left-c.left)-T(s.borderLeftWidth);return[d,u,r,l]}(e),w=C(e),v=t.get(e);a===u&&s===f||function(e,t,n,o){const i=u-t,r=f-n,l=document.documentElement.style.scrollBehavior;"smooth"===getComputedStyle(d).scrollBehavior&&(document.documentElement.style.scrollBehavior="auto");if(window.scrollTo(window.scrollX+i,window.scrollY+r),!e.parentElement)return;const a=e.parentElement;let s=a.clientHeight,c=a.clientWidth;const h=performance.now();function p(){requestAnimationFrame(()=>{if(!B(o)){const e=s-a.clientHeight,t=c-a.clientWidth;h+o.duration>performance.now()?(window.scrollTo({left:window.scrollX-t,top:window.scrollY-e}),s=a.clientHeight,c=a.clientWidth,p()):document.documentElement.style.scrollBehavior=l}})}p()}(e,a,s,w);let y,b={position:"absolute",top:`${c}px`,left:`${h}px`,width:`${g}px`,height:`${m}px`,margin:"0",pointerEvents:"none",transformOrigin:"center",zIndex:"100"};if(B(w)){const[t,n]=j(w(e,"remove",v));!1!==(null==n?void 0:n.styleReset)&&(b=(null==n?void 0:n.styleReset)||b,Object.assign(e.style,b)),y=new Animation(t),y.play()}else Object.assign(e.style,b),y=e.animate([{transform:"scale(1)",opacity:1},{transform:"scale(.98)",opacity:0}],{duration:w.duration,easing:"ease-out"});o.set(e,y),y.addEventListener("finish",()=>A(e,b),{once:!0})}(e):$(e)}(e))},w=n=>{n.forEach(n=>{n.target===d&&(clearTimeout(s.get(d)),s.set(d,setTimeout(()=>{e.forEach(e=>k(e,e=>M(()=>b(e))))},100))),t.has(n.target)&&b(n.target)})};function v(e){const t=e.getBoundingClientRect(),n=(null==d?void 0:d.clientWidth)||0,o=(null==d?void 0:d.clientHeight)||0;return t.bottom<0||t.top>o||t.right<0||t.left>n}function y(e){const n=i.get(e);null==n||n.disconnect();let o=t.get(e),r=0;o||(o=O(e),t.set(e,o));const{offsetWidth:l,offsetHeight:a}=d,s=[o.top-5,l-(o.left+5+o.width),a-(o.top+5+o.height),o.left-5].map(e=>-1*Math.floor(e)+"px").join(" "),c=new IntersectionObserver(()=>{++r>1&&b(e)},{root:d,threshold:1,rootMargin:s});c.observe(e),i.set(e,c)}function b(e,n=!0){clearTimeout(s.get(e));const i=C(e),r=n?B(i)?500:i.duration:0;s.set(e,setTimeout(async()=>{const n=o.get(e);try{await(null==n?void 0:n.finished),t.set(e,O(e)),y(e)}catch{}},r))}function E(e){setTimeout(()=>{l.set(e,setInterval(()=>M(b.bind(null,e)),2e3))},Math.round(2e3*Math.random()))}function M(e){"function"==typeof requestIdleCallback?requestIdleCallback(()=>e()):requestAnimationFrame(()=>e())}let W;const x="undefined"!=typeof window&&"ResizeObserver"in window;function _(e,t){t||h in e?t&&!(h in t)&&Object.defineProperty(t,h,{value:e}):Object.defineProperty(e,h,{value:e})}function T(e){return Number(e.replace(/[^0-9.\-]/g,""))}function O(e){const t=e.getBoundingClientRect(),{x:n,y:o}=function(e){let t=e.parentElement;for(;t;){if(t.scrollLeft||t.scrollTop)return{x:t.scrollLeft,y:t.scrollTop};t=t.parentElement}return{x:0,y:0}}(e);return{top:t.top+o,left:t.left+n,width:t.width,height:t.height}}function S(e,t,n){let o=t.width,i=t.height,r=n.width,l=n.height;const a=getComputedStyle(e);if("content-box"===a.getPropertyValue("box-sizing")){const e=T(a.paddingTop)+T(a.paddingBottom)+T(a.borderTopWidth)+T(a.borderBottomWidth),t=T(a.paddingLeft)+T(a.paddingRight)+T(a.borderRightWidth)+T(a.borderLeftWidth);o-=t,r-=t,i-=e,l-=e}return[o,r,i,l].map(Math.round)}function C(e){return h in e&&a.has(e[h])?a.get(e[h]):{duration:250,easing:"ease-in-out"}}function L(e){if(h in e)return e[h]}function N(e){const t=L(e);return!!t&&c.has(t)}function k(e,...t){t.forEach(t=>t(e,a.has(e)));for(let n=0;n<e.children.length;n++){const o=e.children.item(n);o&&t.forEach(e=>e(o,a.has(o)))}}function j(e){return Array.isArray(e)?e:[e]}function B(e){return"function"==typeof e}function $(e){g in e&&delete e[g];const n=O(e);t.set(e,n);const i=C(e);if(!N(e))return;if(v(e))return void y(e);let r;if("function"!=typeof i)r=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"});else{const[t]=j(i(e,"add",n));r=new Animation(t),r.play()}o.set(e,r),r.addEventListener("finish",b.bind(null,e,!1),{once:!0})}function A(e,r){var l;e.remove(),t.delete(e),n.delete(e),o.delete(e),null===(l=i.get(e))||void 0===l||l.disconnect(),setTimeout(()=>{if(p in e&&delete e[p],Object.defineProperty(e,g,{value:!0,configurable:!0}),r&&e instanceof HTMLElement)for(const t in r)e.style[t]=""},0)}function R(d,u={}){if(x&&W){if(!(window.matchMedia("(prefers-reduced-motion: reduce)").matches&&!B(u)&&!u.disrespectUserMotionPreference)){c.add(d),"static"===getComputedStyle(d).position&&Object.assign(d.style,{position:"relative"}),k(d,b,E,e=>null==W?void 0:W.observe(e)),B(u)?a.set(d,u):a.set(d,{duration:250,easing:"ease-in-out",...u});const t=new MutationObserver(m);t.observe(d,{childList:!0}),r.set(d,t),e.add(d)}}return Object.freeze({parent:d,enable:()=>{c.add(d)},disable:()=>{c.delete(d),k(d,e=>{const t=o.get(e);try{null==t||t.cancel()}catch{}o.delete(e);const n=s.get(e);n&&clearTimeout(n),s.delete(e);const i=l.get(e);i&&clearInterval(i),l.delete(e)})},isEnabled:()=>c.has(d),destroy:()=>{c.delete(d),e.delete(d),a.delete(d);const u=r.get(d);null==u||u.disconnect(),r.delete(d),k(d,e=>{null==W||W.unobserve(e);const r=o.get(e);try{null==r||r.cancel()}catch{}o.delete(e);const a=i.get(e);null==a||a.disconnect(),i.delete(e);const c=l.get(e);c&&clearInterval(c),l.delete(e);const d=s.get(e);d&&clearTimeout(d),s.delete(e),t.delete(e),n.delete(e)})}})}x&&(d=document.documentElement,new MutationObserver(m),W=new ResizeObserver(w),window.addEventListener("scroll",()=>{f=window.scrollY,u=window.scrollX}),W.observe(d));const P={mounted:(e,t)=>{const n=R(e,t.value||{});Object.defineProperty(e,"__aa_ctl",{value:n,configurable:!0})},unmounted:e=>{var t;const n=e.__aa_ctl;null===(t=null==n?void 0:n.destroy)||void 0===t||t.call(n);try{delete e.__aa_ctl}catch{}},getSSRProps:()=>({})};export{R as autoAnimate,R as default,S as getTransitionSizes,P as vAutoAnimate};