UNPKG

@ionic/core

Version:
4 lines • 10.3 kB
/*! * (C) Ionic http://ionicframework.com - MIT License */ import{i as t}from"./p-Dj4J3LkD.js";import{c as o}from"./p-BgkRGRO3.js";import{g as n}from"./p-CJmyfI8x.js";import"./p-BpRUsN_W.js";import"./p-B2y1T0dN.js";const a=t=>document.querySelector(`${t}.ion-cloned-element`),s=t=>t.shadowRoot||t,e=t=>{const o="ION-TABS"===t.tagName?t:t.querySelector("ion-tabs"),n="ion-content ion-header:not(.header-collapse-condense-inactive) ion-title.title-large";if(null!=o){const t=o.querySelector("ion-tab:not(.tab-hidden), .ion-page:not(.ion-page-hidden)");return null!=t?t.querySelector(n):null}return t.querySelector(n)},r=(t,o)=>{const n="ION-TABS"===t.tagName?t:t.querySelector("ion-tabs");let a=[];if(null!=n){const t=n.querySelector("ion-tab:not(.tab-hidden), .ion-page:not(.ion-page-hidden)");null!=t&&(a=t.querySelectorAll("ion-buttons"))}else a=t.querySelectorAll("ion-buttons");for(const t of a){const n=t.closest("ion-header"),a=n&&!n.classList.contains("header-collapse-condense-inactive"),s=t.querySelector("ion-back-button"),e=t.classList.contains("buttons-collapse");if(null!==s&&("start"===t.slot||""===t.slot)&&(e&&a&&o||!e))return s}return null},i=(t,n,e,r,i,l,c,p,$)=>{const d=n?`calc(100% - ${i.right+4}px)`:i.left-4+"px",m=n?"right":"left",b=n?"left":"right",u=n?"right":"left";let y=1,X=1,x=`scale(${X})`;const h="scale(1)";if(l&&c){const t=l.textContent?.trim()===p.textContent?.trim();y=$.width/c.width,X=($.height-f)/c.height,x=t?`scale(${y}, ${X})`:`scale(${X})`}const g=s(r).querySelector("ion-icon").getBoundingClientRect(),k=n?g.width/2-(g.right-i.right)+"px":i.left-g.width/2+"px",w=n?`-${window.innerWidth-i.right}px`:`${i.left}px`,v=`${$.top}px`,T=`${i.top}px`,j=e?[{offset:0,transform:`translate3d(${w}, ${T}, 0)`},{offset:1,transform:`translate3d(${k}, ${v}, 0)`}]:[{offset:0,transform:`translate3d(${k}, ${v}, 0)`},{offset:1,transform:`translate3d(${w}, ${T}, 0)`}],B=e?[{offset:0,opacity:1,transform:h},{offset:1,opacity:0,transform:x}]:[{offset:0,opacity:0,transform:x},{offset:1,opacity:1,transform:h}],A=e?[{offset:0,opacity:1,transform:"scale(1)"},{offset:.2,opacity:0,transform:"scale(0.6)"},{offset:1,opacity:0,transform:"scale(0.6)"}]:[{offset:0,opacity:0,transform:"scale(0.6)"},{offset:.6,opacity:0,transform:"scale(0.6)"},{offset:1,opacity:1,transform:"scale(1)"}],N=o(),I=o(),O=o(),R=a("ion-back-button"),D=s(R).querySelector(".button-text"),J=s(R).querySelector("ion-icon");R.text=r.text,R.mode=r.mode,R.icon=r.icon,R.color=r.color,R.disabled=r.disabled,R.style.setProperty("display","block"),R.style.setProperty("position","fixed"),I.addElement(J),N.addElement(D),O.addElement(R),O.beforeStyles({position:"absolute",top:"0px",[u]:"0px"}).beforeAddWrite((()=>{r.style.setProperty("display","none"),R.style.setProperty(m,d)})).afterAddWrite((()=>{r.style.setProperty("display",""),R.style.setProperty("display","none"),R.style.removeProperty(m)})).keyframes(j),N.beforeStyles({"transform-origin":`${m} top`}).keyframes(B),I.beforeStyles({"transform-origin":`${b} center`}).keyframes(A),t.addAnimation([N,I,O])},l=(t,n,s,e,r,i,l,c,p)=>{const $=n?"right":"left",d=n?`calc(100% - ${r.right}px)`:`${r.left}px`,m=`${r.top}px`;let b=n?`-${window.innerWidth-l.right-8}px`:`${l.x+8}px`,u=.5;const y="scale(1)";let X=`scale(${u})`;if(c&&p){b=n?`-${window.innerWidth-p.right-8}px`:p.x-8+"px";const t=c.textContent?.trim()===e.textContent?.trim();u=p.height/(i.height-f),X=t?`scale(${p.width/i.width}, ${u})`:`scale(${u})`}const x=l.top+l.height/2-r.height*u/2+"px",h=s?[{offset:0,opacity:0,transform:`translate3d(${b}, ${x}, 0) ${X}`},{offset:.1,opacity:0},{offset:1,opacity:1,transform:`translate3d(0px, ${m}, 0) ${y}`}]:[{offset:0,opacity:.99,transform:`translate3d(0px, ${m}, 0) ${y}`},{offset:.6,opacity:0},{offset:1,opacity:0,transform:`translate3d(${b}, ${x}, 0) ${X}`}],g=a("ion-title"),k=o();g.innerText=e.innerText,g.size=e.size,g.color=e.color,k.addElement(g),k.beforeStyles({"transform-origin":`${$} top`,height:`${r.height}px`,display:"",position:"relative",[$]:d}).beforeAddWrite((()=>{e.style.setProperty("opacity","0")})).afterAddWrite((()=>{e.style.setProperty("opacity",""),g.style.setProperty("display","none")})).keyframes(h),t.addAnimation(k)},c=(a,c)=>{try{const f="cubic-bezier(0.32,0.72,0,1)",p="opacity",$="transform",d="0%",m=.8,b=t(a),u=b?"-99.5%":"99.5%",y=b?"33%":"-33%",X=c.enteringEl,x=c.leavingEl,h="back"===c.direction,g=X.querySelector(":scope > ion-content"),k=X.querySelectorAll(":scope > ion-header > *:not(ion-toolbar), :scope > ion-footer > *"),w=X.querySelectorAll(":scope > ion-header > ion-toolbar"),v=o(),T=o();if(v.addElement(X).duration((c.duration??0)||540).easing(c.easing||f).fill("both").beforeRemoveClass("ion-page-invisible"),x&&null!=a){const t=o();t.addElement(a),v.addAnimation(t)}if(g||0!==w.length||0!==k.length?(T.addElement(g),T.addElement(k)):T.addElement(X.querySelector(":scope > .ion-page, :scope > ion-nav, :scope > ion-tabs")),v.addAnimation(T),h?T.beforeClearStyles([p]).fromTo("transform",`translateX(${y})`,`translateX(${d})`).fromTo(p,m,1):T.beforeClearStyles([p]).fromTo("transform",`translateX(${u})`,`translateX(${d})`),g){const t=s(g).querySelector(".transition-effect");if(t){const n=t.querySelector(".transition-cover"),a=t.querySelector(".transition-shadow"),s=o(),e=o(),r=o();s.addElement(t).beforeStyles({opacity:"1",display:"block"}).afterStyles({opacity:"",display:""}),e.addElement(n).beforeClearStyles([p]).fromTo(p,0,.1),r.addElement(a).beforeClearStyles([p]).fromTo(p,.03,.7),s.addAnimation([e,r]),T.addAnimation([s])}}const j=X.querySelector("ion-header.header-collapse-condense"),{forward:B,backward:A}=((t,o,n,a,c)=>{const f=r(a,n),p=e(c),$=e(a),d=r(c,n),m=null!==f&&null!==p&&!n,b=null!==$&&null!==d&&n;if(m){const a=p.getBoundingClientRect(),e=f.getBoundingClientRect(),r=s(f).querySelector(".button-text"),c=r?.getBoundingClientRect(),$=s(p).querySelector(".toolbar-title").getBoundingClientRect();l(t,o,n,p,a,$,e,r,c),i(t,o,n,f,e,r,c,p,$)}else if(b){const a=$.getBoundingClientRect(),e=d.getBoundingClientRect(),r=s(d).querySelector(".button-text"),c=r?.getBoundingClientRect(),f=s($).querySelector(".toolbar-title").getBoundingClientRect();l(t,o,n,$,a,f,e,r,c),i(t,o,n,d,e,r,c,$,f)}return{forward:m,backward:b}})(v,b,h,X,x);if(w.forEach((t=>{const n=o();n.addElement(t),v.addAnimation(n);const a=o();a.addElement(t.querySelector("ion-title"));const e=o(),r=Array.from(t.querySelectorAll("ion-buttons,[menuToggle]")),i=t.closest("ion-header"),l=i?.classList.contains("header-collapse-condense-inactive");let c;c=r.filter(h?t=>{const o=t.classList.contains("buttons-collapse");return o&&!l||!o}:t=>!t.classList.contains("buttons-collapse")),e.addElement(c);const f=o();f.addElement(t.querySelectorAll(":scope > *:not(ion-title):not(ion-buttons):not([menuToggle])"));const $=o();$.addElement(s(t).querySelector(".toolbar-background"));const m=o(),X=t.querySelector("ion-back-button");if(X&&m.addElement(X),n.addAnimation([a,e,f,$,m]),e.fromTo(p,.01,1),f.fromTo(p,.01,1),h)l||a.fromTo("transform",`translateX(${y})`,`translateX(${d})`).fromTo(p,.01,1),f.fromTo("transform",`translateX(${y})`,`translateX(${d})`),m.fromTo(p,.01,1);else{j||a.fromTo("transform",`translateX(${u})`,`translateX(${d})`).fromTo(p,.01,1),f.fromTo("transform",`translateX(${u})`,`translateX(${d})`),$.beforeClearStyles([p,"transform"]);const t=i?.translucent;if(t?$.fromTo("transform",b?"translateX(-100%)":"translateX(100%)","translateX(0px)"):$.fromTo(p,.01,"var(--opacity)"),B||m.fromTo(p,.01,1),X&&!B){const t=o();t.addElement(s(X).querySelector(".button-text")).fromTo("transform",b?"translateX(-100px)":"translateX(100px)","translateX(0px)"),n.addAnimation(t)}}})),x){const t=o(),a=x.querySelector(":scope > ion-content"),e=x.querySelectorAll(":scope > ion-header > ion-toolbar"),r=x.querySelectorAll(":scope > ion-header > *:not(ion-toolbar), :scope > ion-footer > *");if(a||0!==e.length||0!==r.length?(t.addElement(a),t.addElement(r)):t.addElement(x.querySelector(":scope > .ion-page, :scope > ion-nav, :scope > ion-tabs")),v.addAnimation(t),h){t.beforeClearStyles([p]).fromTo("transform",`translateX(${d})`,b?"translateX(-100%)":"translateX(100%)");const o=n(x);v.afterAddWrite((()=>{"normal"===v.getDirection()&&o.style.setProperty("display","none")}))}else t.fromTo("transform",`translateX(${d})`,`translateX(${y})`).fromTo(p,1,m);if(a){const n=s(a).querySelector(".transition-effect");if(n){const a=n.querySelector(".transition-cover"),s=n.querySelector(".transition-shadow"),e=o(),r=o(),i=o();e.addElement(n).beforeStyles({opacity:"1",display:"block"}).afterStyles({opacity:"",display:""}),r.addElement(a).beforeClearStyles([p]).fromTo(p,.1,0),i.addElement(s).beforeClearStyles([p]).fromTo(p,.7,.03),e.addAnimation([r,i]),t.addAnimation([e])}}e.forEach((t=>{const n=o();n.addElement(t);const a=o();a.addElement(t.querySelector("ion-title"));const e=o(),r=t.querySelectorAll("ion-buttons,[menuToggle]"),i=t.closest("ion-header"),l=i?.classList.contains("header-collapse-condense-inactive"),c=Array.from(r).filter((t=>{const o=t.classList.contains("buttons-collapse");return o&&!l||!o}));e.addElement(c);const f=o(),m=t.querySelectorAll(":scope > *:not(ion-title):not(ion-buttons):not([menuToggle])");m.length>0&&f.addElement(m);const u=o();u.addElement(s(t).querySelector(".toolbar-background"));const X=o(),x=t.querySelector("ion-back-button");if(x&&X.addElement(x),n.addAnimation([a,e,f,X,u]),v.addAnimation(n),X.fromTo(p,.99,0),e.fromTo(p,.99,0),f.fromTo(p,.99,0),h){l||a.fromTo("transform",`translateX(${d})`,b?"translateX(-100%)":"translateX(100%)").fromTo(p,.99,0),f.fromTo("transform",`translateX(${d})`,b?"translateX(-100%)":"translateX(100%)"),u.beforeClearStyles([p,"transform"]);const t=i?.translucent;if(t?u.fromTo("transform","translateX(0px)",b?"translateX(-100%)":"translateX(100%)"):u.fromTo(p,"var(--opacity)",0),x&&!A){const t=o();t.addElement(s(x).querySelector(".button-text")).fromTo("transform",`translateX(${d})`,`translateX(${(b?-124:124)+"px"})`),n.addAnimation(t)}}else l||a.fromTo("transform",`translateX(${d})`,`translateX(${y})`).fromTo(p,.99,0).afterClearStyles([$,p]),f.fromTo("transform",`translateX(${d})`,`translateX(${y})`).afterClearStyles([$,p]),X.afterClearStyles([p]),a.afterClearStyles([p]),e.afterClearStyles([p])}))}return v}catch(t){throw t}},f=10;export{c as iosTransitionAnimation,s as shadow}