feat: improve image zoom animation once more

Author: johannesjo

app-src/scripts/enlarge-image/_enlarge-image-d.scss

@@ -8,7 +8,6 @@
   top: 0;
   bottom: 0;
   right: 0;
-  background: rgba(0, 0, 0, 0.2);
   z-index: 10;
   width: 100%;
   height: 100%;
@@ -18,13 +17,24 @@
   justify-content: center; /* center items vertically, in this case */
   align-items: center; /* center items horizontally, in this case */
   transition: 0.2s all;
-  opacity: 0;
 
-  &.ani-enter {
-    opacity: 1;
+  &:after {
+    transition: 0.2s all;
+
+    content: '';
+    background: rgba(0, 0, 0, 0.2);
+    position: absolute;
+    left: 0;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    opacity: 0;
   }
 
-  &.ani-remove {
+  &.ani-enter:after {
+    opacity: 1;
+  }
+  &.ani-remove:after {
     opacity: 0;
   }
 }

app-src/scripts/enlarge-image/enlarge-image-d.js

@@ -38,14 +38,13 @@
     }
 
     hideImg() {
-
       this.$enlargedImgWrapperEl.removeClass('ani-enter');
       this.$enlargedImgWrapperEl.addClass('ani-remove');
       this.setCoordsForImageAni();
-      this.imageEl.setAttribute('style', `visibility: visible`);
 
       this.$enlargedImgWrapperEl.on('transitionend', () => {
         this.$enlargedImgWrapperEl.remove();
+        this.imageEl.setAttribute('style', `visibility: visible`);
       });
     }
 
@@ -65,7 +64,7 @@
 
       setTimeout(() => {
         this.$enlargedImgWrapperEl.addClass('ani-enter');
-      }, 0);
+      }, 10);
 
       this.$enlargedImgWrapperEl.bind('click', () => {
         this.hideImg();