pixiu-number-toolkit
Version:
A collection of number utilities.
11 lines (10 loc) • 2.21 kB
JavaScript
var g=class{constructor(t,n=0,e=40){this.element=t,this.value=n,this.targetValue=n,this.animationDuration=1e3,this.digitHeight=e,this.render();}setValue(t){this.targetValue=t,this.animateToTarget();}setAnimationDuration(t){this.animationDuration=t,this.render();}render(){this.element.style.overflow="hidden",this.element.style.display="flex",this.element.style.height=`${this.digitHeight}px`,this.element.innerHTML=this.createDigitElements();}createDigitElements(){return this.value.toString().split("").map(t=>t==="."?`<div style="width: ${this.digitHeight/4}px; display: flex; align-items: flex-end; justify-content: center">.</div>`:`
<div style="position: relative; width: ${this.digitHeight/2}px; height: ${this.digitHeight}px; overflow: hidden;">
<div class="digit-column" style="position: absolute; top: 0; left: 0; width: 100%; height: ${this.digitHeight*20}px; transition: transform ${this.animationDuration}ms cubic-bezier(0.25, 0.1, 0.25, 1);">
${Array.from({length:20},(n,e)=>`<div style="height: ${this.digitHeight}px; display: flex; align-items: center; justify-content: center;">${e%10}</div>`).join("")}
</div>
</div>
`).join("")}animateToTarget(){let t=this.value.toString().split(""),n=this.targetValue.toString().split(""),e=Array.from(this.element.children);for(;e.length<n.length;){let i=document.createElement("div");i.innerHTML=this.createDigitElements(),this.element.appendChild(i.firstElementChild),e=Array.from(this.element.children);}n.forEach((i,l)=>{let h=e[l],o=t[l]||"0";if(i==="."||o===".")h.textContent=i;else {let s=parseInt(o),d=parseInt(i),r=d-s;r<0&&(r+=10);let a=h.firstElementChild,m=-(s+r)*this.digitHeight;a.style.transform=`translateY(${m}px)`,a.addEventListener("transitionend",this.handleTransitionEnd.bind(this,a,s,d),{once:!0});}}),this.value=this.targetValue;}handleTransitionEnd(t,n,e){t.style.transition="none";let i=-e*this.digitHeight;t.style.transform=`translateY(${i}px)`,t.offsetHeight,t.style.transition=`transform ${this.animationDuration}ms cubic-bezier(0.25, 0.1, 0.25, 1)`;}};
export { g as a };
//# sourceMappingURL=chunk-SDLSV2FE.js.map
//# sourceMappingURL=chunk-SDLSV2FE.js.map