@qzdata/vue-petite-transition
Version:
A simple solution for transition for petite-vue .
2 lines (1 loc) • 2.65 kB
JavaScript
var PetiteVue=function(e){"use strict";function t(){let e=[],t={requestAnimationFrame(...e){let i=requestAnimationFrame(...e);return t.add((()=>cancelAnimationFrame(i)))},nextFrame:(...e)=>t.requestAnimationFrame((()=>t.requestAnimationFrame(...e))),setTimeout(...e){let i=setTimeout(...e);return t.add((()=>clearTimeout(i)))},microTask(...e){let i={current:!0};return function(e){"function"==typeof queueMicrotask?queueMicrotask(e):Promise.resolve().then(e).catch((e=>setTimeout((()=>{throw e}))))}((()=>{i.current&&e[0]()})),t.add((()=>{i.current=!1}))},add:t=>(e.push(t),()=>{let i=e.indexOf(t);if(i>=0){let[t]=e.splice(i,1);t()}}),dispose(){for(let t of e.splice(0))t()}};return t}function i(e,...t){e&&t.length>0&&e.classList.add(...t)}function n(e,...t){e&&t.length>0&&e.classList.remove(...t)}var r,s=((r=s||{}).Finished="finished",r.Cancelled="cancelled",r);function l(e,r,s,l,o,a){let u=t(),d=void 0!==a?function(e){let t={called:!1};return(...i)=>{if(!t.called)return t.called=!0,e(...i)}}(a):()=>{};return n(e,...o),i(e,...r,...s),u.nextFrame((()=>{n(e,...s),i(e,...l),u.add(function(e,i){let n=t();if(!e)return n.dispose;let{transitionDuration:r,transitionDelay:s}=getComputedStyle(e),[l,o]=[r,s].map((e=>{let[t=0]=e.split(",").filter(Boolean).map((e=>e.includes("ms")?parseFloat(e):1e3*parseFloat(e))).sort(((e,t)=>t-e));return t}));return 0!==l?n.setTimeout((()=>i("finished")),l+o):i("finished"),n.add((()=>i("cancelled"))),n.dispose}(e,(t=>(n(e,...l,...r),i(e,...o),d(t)))))})),u.add((()=>n(e,...r,...s,...l,...o))),u.add((()=>d("cancelled"))),u.dispose}function o(e=""){return null===e?void 0:e.split(" ").filter((e=>e.trim().length>1))}const a=({el:e,arg:t,exp:i,modifiers:n,get:r,effect:a})=>{const u=e.style.display;"show"===t&&(e.style.display=r()?u:"none"),(new Map).set(t,[i,n]),"show"!==t&&t&&e.setAttribute(t,i);let d,c,f,m,p,g,h,A,v=!1;a((()=>{"show"===t&&(c||(c=o(e.getAttribute("enter"))),f||(f=o(e.getAttribute("enter-from"))),m||(m=o(e.getAttribute("enter-to"))),p||(p=o(e.getAttribute("entered")||e.getAttribute("enter-to"))),g||(g=o(e.getAttribute("leave")||e.getAttribute("enter"))),h||(h=o(e.getAttribute("leave-from")||e.getAttribute("enter-to"))),A||(A=o(e.getAttribute("leave-to")||e.getAttribute("enter-from"))),r()&&(e.style.display=u),c&&f&&m&&p&&(v&&(d&&d(),v=!1),r()&&!v?(v=!0,d=l(e,c,f,m,p,(e=>{e===s.Finished&&(v=!1)}))):v||(v=!0,d=l(e,g,h,A,p,(t=>{if(t!==s.Finished)return;v=!1,e.style.display="none";const i=new CustomEvent("after-leave");e.dispatchEvent(i)})))))}))};return e.default=a,e.transitionDirective=a,Object.defineProperties(e,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}}),e}({});