From 42a8bb8bc8bf5ad3d7871fb44e7f2095c1471b98 Mon Sep 17 00:00:00 2001 From: Spedon Date: Sun, 26 Mar 2023 23:32:12 +0800 Subject: [PATCH] fix the bug of transition not working when changing from display none to block --- assets/css/_partial/_image.scss | 5 ++++ assets/ts/desktop.ts | 24 ++++++++++++------- assets/ts/overlay.ts | 42 +++++++++++++++++++++++---------- assets/ts/utils.ts | 13 +++++++--- 4 files changed, 59 insertions(+), 25 deletions(-) diff --git a/assets/css/_partial/_image.scss b/assets/css/_partial/_image.scss index 4f678f8..b34d625 100644 --- a/assets/css/_partial/_image.scss +++ b/assets/css/_partial/_image.scss @@ -43,5 +43,10 @@ transition-timing-function: ease-out; transition-duration: 0.2s; } + + &[data-status='overlay'] { + opacity: 1; + max-height: calc(100vh - var(--footer-height)); + } } } \ No newline at end of file diff --git a/assets/ts/desktop.ts b/assets/ts/desktop.ts index 389cf6d..cd13423 100644 --- a/assets/ts/desktop.ts +++ b/assets/ts/desktop.ts @@ -14,16 +14,14 @@ import { imagesDivNodes as images } from './elemGen' // global index for "activated" export let globalIndex: number = 0 - // last position set as "activated" let last: position = { x: 0, y: 0 } - export let trailingImageIndexes: number[] = [] - +// only used in overlay disable, for storing positions temporarily export let transformCache: string[] = [] - +// abort controller for enter overlay event listener let EnterOverlayClickAbCtl = new AbortController() - +// stack depth of images array export const stackDepth: number = 5 export const addEnterOverlayEL = (e: HTMLImageElement): void => { @@ -56,10 +54,10 @@ const activate = (index: number, mouseX: number, mouseY: number): void => { images[index].style.transform = mouseToTransform(mouseX, mouseY, true, true) images[index].dataset.status = 'null' // reset z index - for (let i = 0; i < indexesNum; i++) { - images[trailingImageIndexes[i]].style.zIndex = `${i}` + for (let i = indexesNum; i > 0; i--) { + images[trailingImageIndexes[i - 1]].style.zIndex = `${i}` } - images[index].style.display = 'block' + images[index].style.visibility = 'visible' last = { x: mouseX, y: mouseY } } @@ -97,11 +95,19 @@ async function enterOverlay(): Promise { e.dataset.status = 'top' center(e) } else { - e.dataset.status = 'trail' e.style.transitionDelay = `${0.1 * i}s` + e.dataset.status = 'trail' } } await delay(stackDepth * 100 + 100 + 1000) + for (let i = 0; i < indexesNum; i++) { + images[trailingImageIndexes[i]].style.transitionDelay = '' + if (i === indexesNum - 1) { + images[trailingImageIndexes[i]].dataset.status = 'overlay' + } else { + images[trailingImageIndexes[i]].style.visibility = 'hidden' + } + } // Offset previous self increment of global index (by handleOnMove) globalIndexDec() // overlay init diff --git a/assets/ts/overlay.ts b/assets/ts/overlay.ts index 5fc0e48..d2e7bc9 100644 --- a/assets/ts/overlay.ts +++ b/assets/ts/overlay.ts @@ -55,38 +55,51 @@ export const overlayDisable = (): void => { async function handleCloseClick(): Promise { // disable overlay overlayDisable() + // get length of indexes and empty indexes array const indexesNum = trailingImageIndexes.length - // empty trail images indexes emptyTrailingImageIndexes() + // prepare animation for (let i: number = 0; i < indexesNum; i++) { // get element from index and store the index const index: number = calcImageIndex(globalIndex - i, imagesArrayLen) const e: HTMLImageElement = images[index] trailingImageIndexes.unshift(index) - e.style.display = 'block' + // set z index for the image element e.style.zIndex = `${indexesNum - i - 1}` // set different style for trailing and top image if (i === 0) { + // set position + e.style.transform = transformCache[indexesNum - i - 1] + // set transition delay e.style.transitionDelay = '0s, 0.7s' + // set status for css e.dataset.status = 'resumeTop' - e.style.transform = transformCache[indexesNum - i - 1] } else { + // set position e.style.transform = transformCache[indexesNum - i - 1] - // e.style.transitionDelay = `${1.2 + 0.1 * i - 0.1}s` - e.style.transitionDelay = '1.5s' + // set transition delay + e.style.transitionDelay = `${1.2 + 0.1 * i - 0.1}s` + // set status for css e.dataset.status = 'resume' } + // style process complete, show the image + e.style.visibility = 'visible' } // halt the function while animation is running await delay(1200 + stackDepth * 100 + 100) // add back enter overlay event listener to top image addEnterOverlayEL(images[calcImageIndex(globalIndex, imagesArrayLen)]) + // clear unused status and transition delay for (let i: number = 0; i < indexesNum; i++) { - images[calcImageIndex(globalIndex - i, imagesArrayLen)].dataset.status = 'null' + const index: number = calcImageIndex(globalIndex - i, imagesArrayLen) + images[index].dataset.status = 'null' + images[index].style.transitionDelay = '' } // Add back previous self increment of global index (by handleOnMove) globalIndexInc() + // add back mousemove event listener window.addEventListener('mousemove', handleOnMove, { passive: true }) + // empty the position array cache emptyTransformCache() } @@ -107,12 +120,13 @@ const handlePrevClick = (): void => { false ) // hide last displayed image - images[imgIndex].style.display = 'none' + images[imgIndex].style.visibility = 'hidden' images[imgIndex].dataset.status = 'trail' + // process the image going to display center(images[prevImgIndex]) - images[prevImgIndex].dataset.status = 'top' + images[prevImgIndex].dataset.status = 'overlay' // process complete, show the image - images[prevImgIndex].style.display = 'block' + images[prevImgIndex].style.visibility = 'visible' // change index display imgIndexSpanUpdate(prevImgIndex + 1, imagesArrayLen) } @@ -134,13 +148,13 @@ const handleNextClick = (): void => { false ) // hide last displayed image - images[imgIndex].style.display = 'none' + images[imgIndex].style.visibility = 'hidden' images[imgIndex].dataset.status = 'trail' // process the image going to display center(images[nextImgIndex]) - images[nextImgIndex].dataset.status = 'top' + images[nextImgIndex].dataset.status = 'overlay' // process complete, show the image - images[nextImgIndex].style.display = 'block' + images[nextImgIndex].style.visibility = 'visible' // change index display imgIndexSpanUpdate(nextImgIndex + 1, imagesArrayLen) } @@ -198,7 +212,9 @@ export const vwRefreshInit = (): void => { r.style.setProperty('--footer-height', '31px') } // recenter image (only in overlay) - if (images[calcImageIndex(globalIndex, imagesArrayLen)].dataset.status === 'top') + if ( + images[calcImageIndex(globalIndex, imagesArrayLen)].dataset.status === 'overlay' + ) center(images[calcImageIndex(globalIndex, imagesArrayLen)]) }, { passive: true } diff --git a/assets/ts/utils.ts b/assets/ts/utils.ts index a1d5a3b..4fbff71 100644 --- a/assets/ts/utils.ts +++ b/assets/ts/utils.ts @@ -62,7 +62,7 @@ export const createImgElement = (input: ImageData): HTMLImageElement => { img.setAttribute('alt', '') img.setAttribute('height', input.imgH) img.setAttribute('width', input.imgW) - img.style.display = 'none' + img.style.visibility = 'hidden' img.dataset.status = 'trail' // img.style.backgroundImage = `linear-gradient(15deg, ${input.pColor}, ${input.sColor})` return img @@ -107,14 +107,18 @@ export const pushIndex = ( autoHide: boolean = true ): number => { let indexesNum: number = indexesArray.length + // create variable overflow to store the tail index let overflow: number if (!invert) { // push the tail index out and hide the image if (indexesNum === stackDepth) { + // insert indexesArray.push(index) + // pop out overflow = indexesArray.shift() as number + // auto hide tail image if (autoHide) { - imagesArray[overflow].style.display = 'none' + imagesArray[overflow].style.visibility = 'hidden' imagesArray[overflow].dataset.status = 'trail' } } else { @@ -123,10 +127,13 @@ export const pushIndex = ( } } else { if (indexesNum === stackDepth) { + // insert indexesArray.unshift(calcImageIndex(index - stackDepth + 1, imagesArrayLen)) + // pop out overflow = indexesArray.pop() as number + // auto hide tail image if (autoHide) { - imagesArray[overflow].style.display = 'none' + imagesArray[overflow].style.visibility = 'hidden' imagesArray[overflow].dataset.status = 'trail' } } else {