fix the bug of transition not working when changing from display none to block

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));
+    }
   }
 }

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++) {
+  for (let i = indexesNum; i > 0; i--) {
-    images[trailingImageIndexes[i]].style.zIndex = `${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<void> {
       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

assets/ts/overlay.ts

@@ -55,38 +55,51 @@ export const overlayDisable = (): void => {
 async function handleCloseClick(): Promise<void> {
   // 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`
+      // set transition delay
-      e.style.transitionDelay = '1.5s'
+      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 }

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 {