UNPKG

@css-spring-animation/vue

Version:

Intuitive and predictable spring animation library powered by CSS Transition

2 lines (1 loc) 19.9 kB
(function(h,y){typeof exports=="object"&&typeof module<"u"?y(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],y):(h=typeof globalThis<"u"?globalThis:h||self,y(h.CSSSpringAnimationVue={},h.Vue))})(this,function(h,y){"use strict";const A="--css-spring-animation-time";let me=!1;function $e(){typeof CSS>"u"||typeof CSS.registerProperty!="function"||me||(CSS.registerProperty({name:A,inherits:!1,initialValue:"0",syntax:"<number>"}),me=!0)}function ye(e,t){let r=!1,n;return new Promise(o=>{function i(){r||(r=!0,clearTimeout(n),o())}t&&t.fn.push(i),n=setTimeout(i,e)})}function P(e){return{type:"value",value:e}}function L(e){return{type:"variable",name:e}}function De(e){return{type:"cosine",radian:e}}function I(e,t){return{type:"binary",left:e,right:t,operator:"+"}}function O(e,t){return{type:"binary",left:e,right:t,operator:"*"}}function W(e){return{type:"exponential",exponent:e}}function _(e){switch(e.type){case"value":return`${e.value}`;case"variable":return`var(${e.name})`;case"cosine":return`cos(1rad * (${_(e.radian)}))`;case"exponential":return`exp(${_(e.exponent)})`;case"binary":return`(${_(e.left)} ${e.operator} ${_(e.right)})`}}function D(e,t){switch(e.type){case"value":return e.value;case"variable":{const r=t==null?void 0:t[e.name];if(r===void 0)throw new Error(`variable '${e.name}' is not provided`);return r}case"cosine":return Math.cos(D(e.radian,t));case"exponential":return Math.exp(D(e.exponent,t));case"binary":switch(e.operator){case"+":return D(e.left,t)+D(e.right,t);case"*":return D(e.left,t)*D(e.right,t)}}}function C(e,t){const r={};for(const n in e)r[n]=t(e[n],n);return r}function X(e,t){const r=[],n=Math.min(e.length,t.length);for(let o=0;o<n;o++)r.push([e[o],t[o]]);return r}function de(e,t){const r=[];for(let n=e;n<t;n++)r.push(n);return r}function ge(){return typeof CSS<"u"&&CSS.supports("transition-timing-function","linear(0, 1)")}function he(){return typeof CSS<"u"&&typeof CSS.registerProperty=="function"&&CSS.supports("width","calc(1px * exp(0))")}function N(){document.body.offsetHeight}function Fe(e,t){return(n=>`calc(${n})`)(_(ve(e,t)))}function G(e,t){const r={[A]:t.time};return D(ve(e,t),r)}function ve(e,t){if(U(t))return P(t.to);const r=O(e.bounce(t),e.decay(t));return I(O(P(re(t.from,t.to)),r),P(t.to))}function Le(e,t){const r={[A]:t.time};return D(e.bounce(t),r)}function ke(e,t){const r={[A]:t.time};return D(e.decay(t),r)}function Y(e,t){return e.velocity(t)}function ee(e,t){const r=Math.abs(t.from-t.to),n=6e4,o=r<5,i=o?.001:1,s=o?5e-4:.01,u=Math.min(50,Math.ceil(e.duration/30));let c=e.duration;for(;c<n;){const f=c/e.duration,m=G(e,{...t,time:f}),d=Y(e,{...t,time:f}),a=Math.abs(m-t.to)<=i,l=Math.abs(d)<=s;if(a&&l)return c;c+=u}return n}function Be(e,t=0){const r=te({bounce:t,duration:e}),n=ee(r,{from:0,to:1,initialVelocity:0});return Se({spring:r,settlingDuration:n,normalizedVelocity:0})}function Se(e){const{spring:t,settlingDuration:r,normalizedVelocity:n}=e,o=Math.ceil(r/(1e3/60)),i=de(0,o+1).map(s=>{const u=s/o*(r/t.duration);return G(t,{time:u,from:0,to:1,initialVelocity:n})});return`${r}ms linear(${i.join(",")})`}function te(e){return e.bounce>0?Re(e):e.bounce<0?xe(e):qe(e)}function ne(e){return e<0?3.8*(2-Math.sqrt(-e)):e>0?10*(1-Math.sqrt(e)):8}function re(e,t){return e-t===0?1e-6:e-t}function oe(e,{from:t,to:r,duration:n}){return e/re(t,r)*(n/1e3)}function ie(e,{from:t,to:r,duration:n}){return e*re(t,r)*(1e3/n)}function U(e){return e.from===e.to&&e.initialVelocity===0}function se({from:e,to:t,bounce:r,duration:n,initialVelocity:o}){const i=oe(o,{from:e,to:t,duration:n}),s=ne(r),u=1.7*Math.PI,c=Math.atan2(-s-i,u);return{A:1/Math.cos(c),a:u,b:c,c:s}}function ue({from:e,to:t,bounce:r,duration:n,initialVelocity:o}){const i=oe(o,{from:e,to:t,duration:n}),s=ne(r),u=1;return{A:i+u*s,B:u,c:s}}function ce({from:e,to:t,bounce:r,duration:n,initialVelocity:o}){const i=oe(o,{from:e,to:t,duration:n}),s=ne(r),u=1e-5,c=(u+s+i)/(2*u),f=(u-s-i)/(2*u);return{A:c,B:f,a:u,c:s}}function Re({bounce:e,duration:t}){return{duration:t,bounce:n=>{const{A:o,a:i,b:s}=se({...n,bounce:e,duration:t});return O(P(o),De(I(O(P(i),L(A)),P(s))))},decay:n=>{const{c:o}=se({...n,bounce:e,duration:t});return W(O(P(-o),L(A)))},velocity:n=>{if(U(n))return 0;const{A:o,a:i,b:s,c:u}=se({...n,bounce:e,duration:t}),c=n.time,f=-o*Math.exp(-u*c)*(u*Math.cos(i*c+s)+i*Math.sin(i*c+s));return ie(f,{...n,duration:t})}}}function qe({bounce:e,duration:t}){return{duration:t,bounce:n=>{const{A:o,B:i}=ue({...n,bounce:e,duration:t});return I(O(P(o),L(A)),P(i))},decay:n=>{const{c:o}=ue({...n,bounce:e,duration:t});return W(O(P(-o),L(A)))},velocity:n=>{if(U(n))return 0;const{A:o,B:i,c:s}=ue({...n,bounce:e,duration:t}),u=n.time,c=Math.exp(-s*u)*(o*-s*u+o-i*s);return ie(c,{...n,duration:t})}}}function xe({bounce:e,duration:t}){return{duration:t,bounce:n=>{const{A:o,B:i,a:s}=ce({...n,bounce:e,duration:t}),u=O(P(o),W(O(P(s),L(A)))),c=O(P(i),W(O(P(-1e-5),L(A))));return I(u,c)},decay:n=>{const{c:o}=ce({...n,bounce:e,duration:t});return W(O(P(-o),L(A)))},velocity:n=>{if(U(n))return 0;const{A:o,B:i,a:s,c:u}=ce({...n,bounce:e,duration:t}),c=n.time,f=Math.exp(-u*c)*(s*o*Math.exp(s*c)-s*i*Math.exp(-1e-5*c))-u*Math.exp(-u*c)*(o*Math.exp(s*c)+i*Math.exp(-1e-5*c));return ie(f,{...n,duration:t})}}}const H={ok:!1};function B(e){return t=>{const r=t.match(e);return r?{ok:!0,value:r[0],rest:t.slice(r[0].length)}:H}}function R(...e){return t=>{for(const r of e){const n=r(t);if(n.ok)return n}return H}}function K(e,t){return r=>{const n=e(r);return n.ok?{...n,value:t(n.value)}:n}}function F(...e){return t=>e.reduce((r,n)=>{if(!r.ok)return r;const o=n(r.rest);return o.ok?{...r,value:[...r.value,o.value],rest:o.rest}:o},{ok:!0,value:[],rest:t})}function ze(e){return t=>{let r={ok:!0,value:[],rest:t};for(;;){if(r.rest==="")return r;const n=e(r.rest);if(!n.ok)return r;r.value.push(n.value),r.rest=n.rest}}}function q(e){return t=>{const r=e(t);return{ok:!0,value:r.ok?r.value:"",rest:r.ok?r.rest:t}}}function x(e){return K(e,t=>t.join(""))}function k(e){return t=>t.startsWith(e)?{ok:!0,value:e,rest:t.slice(e.length)}:H}const We=e=>e===""?H:{ok:!0,value:e[0],rest:e.slice(1)},le=e=>{const t=B(/^[1-9]/),r=B(/^\d*/),n=q(R(k("+"),k("-"))),o=k("0"),i=x(F(t,r));return x(F(n,R(o,i)))(e)},_e=e=>{const t=x(F(q(le),k("."))),r=B(/^\d+/);return x(F(t,r))(e)},Ie=e=>{const t=R(_e,le),r=x(F(R(k("e"),k("E")),le));return x(F(t,q(r)))(e)},Ne=e=>{const t=k("#"),r=B(/^[0-9a-fA-F]/),n=B(/^[0-9a-fA-F]{2}/),o=F(t,r,r,r,q(r)),i=F(t,n,n,n,q(n));return R(i,o)(e)},Ge=B(/^([a-z%]+)/),Ue=e=>{const t=K(F(Ie,q(Ge)),o=>({type:"number",value:Number(o[0]),unit:o[1]??""})),r=K(Ne,o=>{const[i,s,u,c]=o.slice(1).map((f,m)=>{if(!f)return;const d=f.length===1?f+f:f,a=parseInt(d,16);return m===3?a/255:a});return{type:"hexColor",red:i,green:s,blue:u,alpha:c}}),n=K(We,o=>({type:"char",value:o}));return ze(R(t,r,n))(e)};function ae(e){const t=Ue(e);if(!t.ok)return{values:[],units:[],wraps:[e]};const r=[...t.value,{type:"char",value:""}];return r.reduce((n,o,i)=>{const s=r[i-1],u=(s==null?void 0:s.type)==="char"||(s==null?void 0:s.type)==="hexColor";if(o.type==="char")return u?n.wraps[n.wraps.length-1]+=o.value:n.wraps.push(o.value),n;if(o.type==="number")return u||n.wraps.push(""),n.values.push(o.value),n.units.push(o.unit),n;if(o.type==="hexColor"){const c=o.alpha===void 0?"rgb(":"rgba(";return u?n.wraps[n.wraps.length-1]+=c:n.wraps.push(c),n.values.push(o.red,o.green,o.blue),n.units.push("","",""),n.wraps.push(", ",", "),o.alpha!==void 0&&(n.values.push(o.alpha),n.units.push(""),n.wraps.push(", ")),n.wraps.push(")"),n}return n},{values:[],units:[],wraps:[]})}function Z(e,t){const r=e.units.map((n,o)=>!n&&e.values[o]===0?t.units[o]??"":n);return{...e,units:r}}function $(e,t){return e.wraps.reduce((r,n,o)=>{const i=e.units[o]??"",s=t[o]===void 0?"":typeof t[o]=="number"?`${t[o]}${i}`:`calc(1${i} * (${t[o]}))`;return r+n+s},"")}function be(e,t,r={}){const n=C(e,([a,l])=>{const p=typeof a=="object"?a:ae(String(a)),g=typeof l=="object"?l:ae(String(l));return[p,g]}),o=r.duration??1e3,i=r.bounce??0,s=te({bounce:i,duration:o}),u=He(n,r.velocity),c=Object.values(u).flatMap(a=>a.map(({from:l,to:p,velocity:g})=>ee(s,{from:l,to:p,initialVelocity:g}))),f=Math.max(...c),m=performance.now(),d=Xe({spring:s,fromTo:n,inputValues:u,startTime:m,duration:o,settlingDuration:f,set:t});return ge()&&Ke(n,r.velocity)?Ze({spring:s,fromTo:n,inputValues:u,settlingDuration:f,set:t}):he()?Je({spring:s,fromTo:n,inputValues:u,duration:o,settlingDuration:f,set:t}):Qe({fromTo:n,context:d,set:t}),d}function He(e,t){return C(e,([r,n],o)=>X(r.values,n.values).map(([i,s],u)=>{var c;return{from:i,to:s,velocity:((c=t==null?void 0:t[o])==null?void 0:c[u])??0}}))}function Ke(e,t){return t?Object.keys(e).every(r=>{const[n,o]=e[r],i=t[r];return!!(!i||i.every(u=>u===0)||X(n.values,o.values).filter(([u,c])=>u!==c).length<=1)}):!0}function Ze({spring:e,fromTo:t,inputValues:r,settlingDuration:n,set:o}){const i=C(t,([s,u])=>s.values.length!==u.values.length?$(u,u.values):$(s,s.values));o({...i,transition:"none"}),requestAnimationFrame(()=>{requestAnimationFrame(()=>{const s=C(t,([f,m])=>$(m,m.values)),u=C(r,f=>{const m=f.reduce((d,{from:a,to:l,velocity:p})=>{if(d!==void 0)return d;if(a!==l)return p/(l-a)},void 0);return Se({spring:e,settlingDuration:n,normalizedVelocity:m??0})}),c=Object.entries(u).map(([f,m])=>`${f} ${m}`).join(",");o({...s,transition:c})})})}function Je({spring:e,fromTo:t,inputValues:r,duration:n,settlingDuration:o,set:i}){$e();const s=C(t,([u,c],f)=>{if(u.values.length!==c.values.length)return $(c,c.values);const d=r[f].map(({from:l,to:p,velocity:g})=>Fe(e,{from:l,to:p,initialVelocity:g})),a=Z(c,u);return $(a,d)});i({...s,transition:"none",[A]:"0"}),requestAnimationFrame(()=>{requestAnimationFrame(()=>{i({...s,transition:`${A} ${o}ms linear`,[A]:String(o/n)})})})}function Qe({fromTo:e,context:t,set:r}){function n(){if(t.settled)return;const o=C(e,([i,s],u)=>{if(i.values.length!==s.values.length)return $(s,s.values);const c=t.realValue[u];if(!c)return"";const f=Z(s,i);return $(f,c)});r({...o,transition:"none"}),requestAnimationFrame(n)}n()}function Xe({spring:e,fromTo:t,inputValues:r,startTime:n,duration:o,settlingDuration:i,set:s}){const u={fn:[]};function c(){m.settled||(m.finished=m.settled=!0,m.stoppedDuration=performance.now()-n,f(),u.fn.forEach(d=>d()))}function f(){const d=C(t,([a,l],p)=>{const g=m.realValue[p];if(!g)return"";const V=Z(l,a);return $(V,g)});s({...d,transition:"",[A]:""})}const m={finishingPromise:ye(o+1,u).then(()=>{m.finished=!0}),settlingPromise:ye(i+1,u).then(()=>{m.finished=m.settled=!0,m.stoppedDuration===void 0&&f()}),finished:!1,settled:!1,stop:c,stoppedDuration:void 0,get realValue(){const d={};for(const[a,[l,p]]of Object.entries(t)){const g=r[a];Object.defineProperty(d,a,{configurable:!0,enumerable:!0,get(){if(m.settled&&m.stoppedDuration===void 0)return p.values;const S=(m.stoppedDuration??performance.now()-n)/o;return g.map(({from:v,to:b,velocity:T})=>G(e,{from:v,to:b,initialVelocity:T,time:S}))}})}return d},get realVelocity(){const d={};for(const[a,l]of Object.entries(r))Object.defineProperty(d,a,{configurable:!0,enumerable:!0,get(){if(m.settled)return new Array(l.length).fill(0);const p=(performance.now()-n)/o;return l.map(({from:g,to:V,velocity:S})=>Y(e,{time:p,from:g,to:V,initialVelocity:S}))}});return d}};return m}function z(e){let t,r={},n,o=[],i;function s(l,p,g){const V=g??u(l);return{fromTo:C(p,(v,b)=>[v,l[b]]),velocity:V}}function u(l){if(n)return n;const p=Ye(o,performance.now());if(p)return p;if(i){const g=i.realVelocity;return C(l,(V,S)=>V.values.map((v,b)=>{var T;return((T=g[S])==null?void 0:T[b])??0}))}return C(l,g=>new Array(g.values.length).fill(0))}function c({keepVelocity:l}={}){n=l&&i?{...i.realVelocity}:void 0,i&&!i.settled&&i.stop(),t&&(t=i?Ce(t,i.realValue):t,i=fe(t)),o=[]}function f(l,p={}){const g=p.animate??!0,V=C(l,(T,w)=>{const M=t==null?void 0:t[w],j=ae(String(T));return M?Z(j,M):j});if(t&&Ve(t,V))return i??fe(t);let S=t;if(t=V,!g||!S)return i&&!i.settled&&i.stop(),i=fe(t),e({...et(t),transition:"",[A]:""}),n||o.push({value:C(t,T=>typeof T=="number"?[T]:T.values),timestamp:performance.now()}),i;i&&!i.settled&&(S=Ce(S,i.realValue));const{fromTo:v,velocity:b}=s(t,S,p.velocity);return i&&!i.settled&&i.stop(),i=be(v,e,{...r,velocity:b}),n=void 0,o=[],i}function m(l){r=l}function d(l){if(!i){l({stopped:!1});return}const p=i;p.finishingPromise.then(()=>{l({stopped:p.stoppedDuration!==void 0})})}function a(l){if(!i){l({stopped:!1});return}const p=i;p.settlingPromise.then(()=>{l({stopped:p.stoppedDuration!==void 0})})}return{get realValue(){if(i)return i.realValue;if(t)return C(t,l=>l.values);throw new Error("style is not set yet. Call setStyle() first.")},get realVelocity(){if(!t)throw new Error("style is not set yet. Call setStyle() first.");return u(t)},stop:c,setStyle:f,setOptions:m,onFinishCurrent:d,onSettleCurrent:a}}function Ye(e,t){const r=e.filter(u=>{const c=t-100,f=t;return c<=u.timestamp&&u.timestamp<=f}),n=r[r.length-1],o=r[0];if(n===o||!n||!o)return;const i=n.timestamp-o.timestamp;return C(n.value,(u,c)=>u.map((f,m)=>{var a;const d=((a=o.value[c])==null?void 0:a[m])??0;return(f-d)*1e3/i}))}function Ce(e,t){return C(e,(r,n)=>{const o=t[n];return{wraps:r.wraps,units:r.units,values:o??new Array(r.values.length).fill(0)}})}function et(e){return C(e,t=>$(t,t.values))}function fe(e){return{realValue:C(e,t=>t.values),realVelocity:C(e,t=>new Array(t.values.length).fill(0)),finished:!0,settled:!0,finishingPromise:Promise.resolve(),settlingPromise:Promise.resolve(),stop:()=>{},stoppedDuration:0}}function Ve(e,t){const r=new Set([...Object.keys(e),...Object.keys(t)]);return Array.from(r).every(n=>{const o=e[n],i=t[n];if(typeof o!="object"||typeof i!="object")return o===i;const s=o.values,u=i.values;return s.length===u.length&&s.every((c,f)=>c===u[f])})}function we(e,t){const r=y.computed(()=>y.toValue(e)),n=y.computed(()=>y.toValue(t)??{}),o=y.computed(()=>n.value.disabled??!1),i=y.computed(()=>n.value.relocating??!1),s=y.computed(()=>o.value||i.value),u=y.ref({}),c=z(l=>{u.value=l});c.setStyle(r.value),c.setOptions(n.value);const f=y.toRef(()=>c.realValue),m=y.toRef(()=>c.realVelocity);function d(l){y.nextTick().then(()=>{c.onFinishCurrent(l)})}function a(l){y.nextTick().then(()=>{c.onSettleCurrent(l)})}return y.watch([s,()=>({...r.value}),()=>({...n.value})],([l,p,g],[V,S])=>{l&&!V&&c.stop({keepVelocity:i.value}),c.setOptions(g),Ve(p,S)||c.setStyle(p,{animate:!l})}),{style:y.readonly(u),realValue:y.readonly(f),realVelocity:y.readonly(m),onFinishCurrent:d,onSettleCurrent:a}}const tt=e=>y.defineComponent({props:{springStyle:{type:Object,required:!0},bounce:Number,duration:Number,disabled:Boolean,relocating:Boolean},setup(t,{slots:r}){const{style:n}=we(()=>t.springStyle,()=>({bounce:t.bounce,duration:t.duration,disabled:t.disabled,relocating:t.relocating}));return()=>{var o;return y.h(e,{style:n.value},(o=r.default)==null?void 0:o.call(r))}}}),nt={},rt=new Proxy(nt,{get:(e,t)=>{const r=e[t];if(r)return r;const n=tt(t);return e[t]=n,n}}),E=Symbol("SpringController");function pe(e){return t=>{for(const r in t)r.startsWith("--")?e.style.setProperty(r,t[r]??""):e.style[r]=t[r]??""}}function Ae(e,t){const r=y.computed(()=>typeof e.bounce=="number"?{enter:e.bounce,leave:e.bounce}:e.bounce),n=y.computed(()=>typeof e.duration=="number"?{enter:e.duration,leave:e.duration}:e.duration);function o(a){t("beforeEnter",a)}function i(a){t("afterEnter",a)}function s(a){t("enterCancelled",a)}function u(a,l){var S,v;const p=a;p[E]||(p[E]=z(pe(p)),p[E].setStyle({...e.springStyle,...e.enterFrom},{animate:!1}),N());const g=p[E];g.setOptions({bounce:(S=r.value)==null?void 0:S.enter,duration:(v=n.value)==null?void 0:v.enter});const V=g.setStyle(e.springStyle);V.finishingPromise.then(()=>{V.stoppedDuration===void 0&&l()})}function c(a,l){var v,b;const p=a;p[E]||(p[E]=z(pe(p)),p[E].setStyle(e.springStyle,{animate:!1}),N());const g=p[E];g.setOptions({bounce:(v=r.value)==null?void 0:v.leave,duration:(b=n.value)==null?void 0:b.leave});const V=e.leaveTo??e.enterFrom,S=g.setStyle({...e.springStyle,...V});S.finishingPromise.then(()=>{S.stoppedDuration===void 0&&l()})}function f(a){t("beforeLeave",a)}function m(a){var p;(p=a[E])==null||p.setStyle({...e.springStyle,...e.enterFrom},{animate:!1}),t("afterLeave",a)}function d(a){t("leaveCancelled",a)}return{onBeforeEnter:o,onEnter:u,onAfterEnter:i,onEnterCancelled:s,onBeforeLeave:f,onLeave:c,onAfterLeave:m,onLeaveCancelled:d}}const Te={springStyle:{type:Object,required:!0},enterFrom:Object,leaveTo:Object,bounce:[Number,Object],duration:[Number,Object]},ot=y.defineComponent({name:"SpringTransition",inheritAttrs:!1,props:Te,setup(e,{attrs:t,emit:r,slots:n}){const{onBeforeEnter:o,onEnter:i,onAfterEnter:s,onEnterCancelled:u,onBeforeLeave:c,onLeave:f,onAfterLeave:m,onLeaveCancelled:d}=Ae(e,r);return()=>y.h(y.Transition,{...t,onBeforeEnter:o,onEnter:i,onAfterEnter:s,onEnterCancelled:u,onBeforeLeave:c,onLeave:f,onAfterLeave:m,onLeaveCancelled:d},n.default)}});function it(e,t){const{[t]:r,...n}=e;return n}const st={...it(Te,"mode"),tag:String,bounce:[Number,Object],duration:[Number,Object]},Me=new WeakMap,Pe=new WeakMap,ut=y.defineComponent({name:"SpringTransitionGroup",inheritAttrs:!1,props:st,setup(e,t){const{emit:r}=t,n=t.attrs;let o=[],i=[];const{onBeforeEnter:s,onEnter:u,onAfterEnter:c,onEnterCancelled:f,onBeforeLeave:m,onLeave:d,onAfterLeave:a,onLeaveCancelled:l}=Ae(e,r),p=y.TransitionGroup.setup({...n,tag:e.tag,onBeforeEnter:s,onEnter:u,onAfterEnter:c,onEnterCancelled:f,onBeforeLeave:m,onLeave:d,onAfterLeave:a,onLeaveCancelled:l},t),g=y.computed(()=>{var v;return typeof e.bounce=="number"?e.bounce:(v=e.bounce)==null?void 0:v.move}),V=y.computed(()=>{var v;return typeof e.duration=="number"?e.duration:(v=e.duration)==null?void 0:v.move});y.onUpdated(()=>{if(o.length===0)return;const v=new Set(i.filter(w=>{var j;const M=(j=w.dirs)==null?void 0:j.find(J=>J.dir===y.vShow);return!M||M.value}).map(w=>w.key)),b=o.filter(w=>v.has(w.key));b.forEach(w=>{const M=w.el,j=M[E];j&&(j.stop({keepVelocity:!0}),j.setStyle({...e.springStyle,transform:""},{animate:!1}),S(M))}),b.forEach(w=>{const M=w.el;Pe.set(w,M.getBoundingClientRect())});const T=b.filter(w=>{const M=Me.get(w),j=Pe.get(w),J=M.left-j.left,je=M.top-j.top;if(J===0&&je===0)return!1;const Q=w.el;Q[E]||(Q[E]=z(pe(Q)));const Oe=Q[E];return Oe.setOptions({bounce:g.value,duration:V.value}),Oe.setStyle({...e.springStyle,transform:`translate(${J}px, ${je}px)`},{animate:!1}),!0});N(),T.forEach(w=>{w.el[E].setStyle({...e.springStyle,transform:"translate(0px, 0px)"})})});function S(v){const b=n.name??"v",T=n.enterFromClass??`${b}-enter-from`,w=n.enterActiveClass??`${b}-enter-active`,M=n.enterToClass??`${b}-enter-to`;v.classList.remove(T),v.classList.remove(w),v.classList.remove(M)}return()=>{o=i;const v=p();return i=v.children,o.forEach(b=>{const T=b.el;Me.set(b,T.getBoundingClientRect())}),v}}});function ct(e){e.directive("spring-style",at),e.directive("spring-options",Ee)}const lt={install:ct},at=(e,{value:t},r)=>{var o;const n=ft(e);(o=r.dirs)==null||o.forEach(i=>{if(i.dir===Ee){const s=i.value;s&&n.setOptions(s)}}),n.setStyle(t)},Ee={};function ft(e){let t=e.__springController;return t||(t=z(r=>{for(const n in r)n.startsWith("--")?e.style.setProperty(n,r[n]??""):e.style[n]=r[n]??""}),e.__springController=t),t}h.SpringTransition=ot,h.SpringTransitionGroup=ut,h.animate=be,h.createAnimateController=z,h.createSpring=te,h.evaluateSpring=G,h.evaluateSpringBounce=Le,h.evaluateSpringDecay=ke,h.evaluateSpringVelocity=Y,h.forceReflow=N,h.interpolateParsedStyle=$,h.isCssLinearTimingFunctionSupported=ge,h.isCssMathAnimationSupported=he,h.mapValues=C,h.range=de,h.spring=rt,h.springCSS=Be,h.springDirectives=lt,h.springSettlingDuration=ee,h.useSpring=we,h.zip=X,Object.defineProperty(h,Symbol.toStringTag,{value:"Module"})});