From 1579fe74e78895a12fb898414f32babfd467f40f Mon Sep 17 00:00:00 2001 From: Eltrac Date: Mon, 15 Sep 2025 11:52:09 +0800 Subject: refactor(animation): calculate final states --- src/shadow.js | 32 ++++++++++++++++---------------- 1 file changed, 16 insertions(+), 16 deletions(-) (limited to 'src') diff --git a/src/shadow.js b/src/shadow.js index 120404a..3178cb8 100644 --- a/src/shadow.js +++ b/src/shadow.js @@ -1,5 +1,5 @@ export default class Shadow { - zIndex = '100' + zIndex = '1000' isOpen = false /** @@ -34,28 +34,28 @@ export default class Shadow { calculateStartsAndFinals() { // get starting state - this.startingState = { + const s = { top: this.element.offsetTop, left: this.element.offsetLeft, width: this.element.offsetWidth, height: this.element.offsetHeight } - // temporarily finalize element - // and get final state - this.element.classList.add('open'); - this.element.style.width = 'unset'; - this.element.style.height = 'unset'; + const f = {} - this.finalState = { - top: this.element.offsetTop, - left: this.element.offsetLeft, - width: this.element.offsetWidth, - height: this.element.offsetHeight - } + // calculate final size + const nw = this.element.naturalWidth; + const nh = this.element.naturalHeight; + const ratio = nw / nh; + f.width = Math.min(nw, window.innerWidth); + f.height = f.width / ratio; + + // calculate final position + f.left = (window.innerWidth - f.width) / 2; + f.top = (window.innerHeight - f.height) / 2; - // re-initialize element and play animation - this.element.classList.remove('open'); + this.finalState = f; + this.startingState = s; } /** @@ -97,7 +97,7 @@ export default class Shadow { this.element.style.height = `${currentHeight}px`; // Log current size for debugging - console.log(`Step ${step}: ${currentWidth}, ${currentHeight}`); + console.log(`Step ${step}: ${currentTop}, ${currentLeft}`); // Increase the step count step++; -- cgit v1.2.3