@captaincodeman/transition/public/transition.js

CSS Class Transitions

const t={bubbles:!0,composed:!0},s=document.createElement("template");s.innerHTML="<style>:host{display:contents;}</style><slot></slot>";class i extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).appendChild(s.content.cloneNode(!0)),this.t=this.t.bind(this),this.i=this.i.bind(this)}connectedCallback(){const s=(t,s)=>(this.getAttribute(t)||this.getAttribute(s)||"").split(" ").filter(t=>t);this.h=s("enter","with"),this.o=s("enter-from","hide"),this.l=s("enter-to","show"),this.m=s("leave","with"),this.u=s("leave-from","show"),this.p=s("leave-to","hide"),this._=0,this.addEventListener("x-transition-add",this.t),this.addEventListener("x-transition-del",this.i),this.dispatchEvent(new Event("x-transition-add",t)),this.v()}disconnectedCallback(){this.dispatchEvent(new Event("x-transition-del",t)),this.removeEventListener("x-transition-add",this.t),this.removeEventListener("x-transition-del",this.i)}C(t){return this.key===t.target.key}t(t){this.C(t)&&this._++}i(t){this.C(t)&&this._--}async v(){await this.k(),this.P=this.shadowRoot.querySelector("slot").assignedElements()[0],this.open?this.P.style.display="":this.P.style.display="none"}get key(){return this.getAttribute("key")}get open(){return this.hasAttribute("open")}set open(t){t?(this.setAttribute("open",""),this.F()):(this.removeAttribute("open"),this.g())}async F(){this.P.style.display="";const s=this.q();this.A(this.h),this.A(this.o),await this.k();const i=this.L(this.h);this.G(this.o),this.A(this.l),await i,this.G(this.h),this.G(this.l),this.dispatchEvent(new Event("x-transition-end",t)),await s}async g(){const s=this.q();this.A(this.m),this.A(this.u),await this.k();const i=this.L(this.m);this.G(this.u),this.A(this.p),await i,this.G(this.m),this.G(this.p),this.dispatchEvent(new Event("x-transition-end",t)),await s,this.P.style.display="none"}A(t){this.P.classList.add(...t)}G(t){this.P.classList.remove(...t)}k(){return new Promise(t=>requestAnimationFrame(()=>requestAnimationFrame(t)))}L(t){return t.length?new Promise(t=>this.addEventListener("transitionend",s=>{s.stopPropagation(),t()},{once:!0})):Promise.resolve()}q(){return new Promise(t=>{let s=this._;const i=e=>{this.C(e)&&0==--s&&(this.removeEventListener("x-transition-end",i),t())};this.addEventListener("x-transition-end",i)})}}customElements.define("x-transition",i);export{i as Transition};