UNPKG

omi-transition

Version:

Define transition animation for entering and leaving

2 lines (1 loc) 2.09 kB
(function(u,i){typeof exports=="object"&&typeof module!="undefined"?i(require("omi")):typeof define=="function"&&define.amd?define(["omi"],i):(u=typeof globalThis!="undefined"?globalThis:u||self,i(u.omi))})(this,function(u){"use strict";u.registerDirective("transition",(e,t)=>{if(e.__updateClasses)return;e.__updateClasses=y(b,0);const{name:r,delay:n=0}=t;new MutationObserver(a=>{a.forEach(c=>{if(c.type==="attributes"&&c.attributeName==="show"){const f=i(e);e.__updateClasses(e,r,f,n,t)}})}).observe(e,{attributes:!0});const l=y(()=>{var c,f;i(e)?(c=t.afterEnter)==null||c.call(t,e):((f=t.afterLeave)==null||f.call(t,e),e.style.display="none"),e.classList.remove(`${r}-enter-active`),e.classList.remove(`${r}-leave-active`)},0);e.__onTransitionEnd&&(e.removeEventListener("transitionend",e.__onTransitionEnd),e.removeEventListener("animationend",e.__onTransitionEnd)),e.addEventListener("transitionend",l),e.addEventListener("animationend",l),e.__onTransitionEnd=l;const v=i(e);e.__updateClasses(e,r,v,n,t)});function i(e){var t;return e.getAttribute("show")==="true"||e.getAttribute("show")==="1"||((t=e.props)==null?void 0:t.show)}let L=!0,_=null;function b(e,t,r,n,s){var l,v;r?(L=!1,e.style.display=_||"",(l=s.beforeEnter)==null||l.call(s,e),e.classList.remove(`${t}-leave-to`),e.classList.remove(`${t}-leave-active`),e.classList.add(`${t}-enter-from`),requestAnimationFrame(()=>{setTimeout(()=>{var a;(a=s.enter)==null||a.call(s,e),e.classList.remove(`${t}-enter-from`),e.classList.add(`${t}-enter-to`),e.classList.add(`${t}-enter-active`)},1+n)})):(e.style.display!=="none"&&(_=e.style.display),(v=s.beforeLeave)==null||v.call(s,e),L?(e.style.display="none",L=!1):(e.classList.remove(`${t}-enter-to`),e.classList.remove(`${t}-enter-active`),e.classList.add(`${t}-leave-from`),requestAnimationFrame(()=>{setTimeout(()=>{var a;(a=s.leave)==null||a.call(s,e),e.classList.remove(`${t}-leave-from`),e.classList.add(`${t}-leave-to`),e.classList.add(`${t}-leave-active`)},1+n)})))}function y(e,t){let r;return function(...n){r&&clearTimeout(r),r=setTimeout(()=>{e.apply(this,n)},t)}}});