perf: image viewer add animation when opening

layout/_partial/image-viewer.ejs

@@ -1,5 +1,3 @@
 <div class="image-viewer-container">
-    <div class="img-box">
     <img src="">
 </div>
-</div>

source/css/layout/_partial/image-viewer.styl

@@ -1,30 +1,37 @@
 .image-viewer-container {
   position: fixed;
-  right: 0;
   left: 0;
-  bottom: 0;
   top: 0;
   width: 100%;
   height: 100%;
-  background: rgba(0, 0, 0, 0.6);
-  z-index: $z-index-9;
-  display: none;
-  align-items: center;
-  justify-content: center;
-
-
-  .img-box {
-    position: relative;
-    width: 80%;
-    height: 100%;
   display: flex;
   align-items: center;
   justify-content: center;
+  background: rgba(0, 0, 0, 0);
+  visibility: hidden;
+  z-index: $z-index-8;
+  padding: 6%;
+  box-sizing: border-box;
+  transition();
+
+  &.active {
+    background: rgba(0, 0, 0, 0.5);
+    visibility: visible;
+
+    img {
+      cursor: zoom-out;
+      transform: scale(1);
+      padding: 2px;
+      background: var(--background-color);
+    }
+  }
 
   img {
     max-width: 100%;
     max-height: 100%;
-      cursor: pointer;
-    }
+    transform: scale(0);
+    transition();
   }
 }
+
+

source/css/layout/common/markdown.styl

@@ -169,7 +169,7 @@
   img {
     box-sizing: border-box;
     max-width: 100%;
-    cursor: pointer;
+    cursor: zoom-in;
     display: block;
     box-shadow: 0 0 2px var(--shadow-color);
 

source/js/utils.js

@@ -167,9 +167,13 @@ KEEP.initUtils = () => {
     imageViewer() {
       let isBigImage = false;
 
-      const showHandle = (dom, isShow) => {
+      const showHandle = (maskDom, isShow) => {
         document.body.style.overflow = isShow ? 'hidden' : 'auto';
-        dom.style.display = isShow ? 'flex' : 'none';
+        if (isShow) {
+          maskDom.classList.add('active');
+        } else {
+          maskDom.classList.remove('active');
+        }
       }
 
       const imageViewerDom = document.querySelector('.image-viewer-container');
@@ -186,11 +190,11 @@ KEEP.initUtils = () => {
           img.addEventListener('click', () => {
             isBigImage = true;
             showHandle(imageViewerDom, isBigImage);
-            targetImg.setAttribute('src', img.getAttribute('src'))
+            targetImg.setAttribute('src', img.getAttribute('src'));
           });
         });
       } else {
-        this.pageContainer_dom.removeChild(imageViewerDom)
+        this.pageContainer_dom.removeChild(imageViewerDom);
       }
     },