UNPKG

@qzdata/vue-petite-transition

Version:

A simple solution for transition for petite-vue .

2 lines (1 loc) 2.5 kB
function x(e){let t={called:!1};return(...n)=>{if(!t.called)return t.called=!0,e(...n)}}function C(e){typeof queueMicrotask=="function"?queueMicrotask(e):Promise.resolve().then(e).catch(t=>setTimeout(()=>{throw t}))}function y(){let e=[],t={requestAnimationFrame(...n){let i=requestAnimationFrame(...n);return t.add(()=>cancelAnimationFrame(i))},nextFrame(...n){return t.requestAnimationFrame(()=>t.requestAnimationFrame(...n))},setTimeout(...n){let i=setTimeout(...n);return t.add(()=>clearTimeout(i))},microTask(...n){let i={current:!0};return C(()=>{i.current&&n[0]()}),t.add(()=>{i.current=!1})},add(n){return e.push(n),()=>{let i=e.indexOf(n);if(i>=0){let[s]=e.splice(i,1);s()}}},dispose(){for(let n of e.splice(0))n()}};return t}function F(e,...t){e&&t.length>0&&e.classList.add(...t)}function p(e,...t){e&&t.length>0&&e.classList.remove(...t)}var v=(e=>(e.Finished="finished",e.Cancelled="cancelled",e))(v||{});function k(e,t){let n=y();if(!e)return n.dispose;let{transitionDuration:i,transitionDelay:s}=getComputedStyle(e),[u,a]=[i,s].map(r=>{let[o=0]=r.split(",").filter(Boolean).map(l=>l.includes("ms")?parseFloat(l):parseFloat(l)*1e3).sort((l,c)=>c-l);return o});return u!==0?n.setTimeout(()=>t("finished"),u+a):t("finished"),n.add(()=>t("cancelled")),n.dispose}function T(e,t,n,i,s,u){let a=y(),r=u!==void 0?x(u):()=>{};return p(e,...s),F(e,...t,...n),a.nextFrame(()=>{p(e,...n),F(e,...i),a.add(k(e,o=>(p(e,...i,...t),F(e,...s),r(o))))}),a.add(()=>p(e,...t,...n,...i,...s)),a.add(()=>r("cancelled")),a.dispose}function d(e=""){return e===null?void 0:e.split(" ").filter(t=>t.trim().length>1)}const q=({el:e,arg:t,exp:n,modifiers:i,get:s,effect:u})=>{const a=e.style.display;t==="show"&&(e.style.display=s()?a:"none"),new Map().set(t,[n,i]),t!=="show"&&t&&e.setAttribute(t,n);let r=!1,o,l,c,m,f,g,h,A;u(()=>{t==="show"&&(l||(l=d(e.getAttribute("enter"))),c||(c=d(e.getAttribute("enter-from"))),m||(m=d(e.getAttribute("enter-to"))),f||(f=d(e.getAttribute("entered")||e.getAttribute("enter-to"))),g||(g=d(e.getAttribute("leave")||e.getAttribute("enter"))),h||(h=d(e.getAttribute("leave-from")||e.getAttribute("enter-to"))),A||(A=d(e.getAttribute("leave-to")||e.getAttribute("enter-from"))),s()&&(e.style.display=a),l&&c&&m&&f&&(r&&(o&&o(),r=!1),s()&&!r?(r=!0,o=T(e,l,c,m,f,b=>{b===v.Finished&&(r=!1)})):r||(r=!0,o=T(e,g,h,A,f,b=>{if(b!==v.Finished)return;r=!1,e.style.display="none";const w=new CustomEvent("after-leave");e.dispatchEvent(w)}))))})};export{q as default,q as transitionDirective};