From 68cb992469c39b56a844190f119a2c74704b1b73 Mon Sep 17 00:00:00 2001
From: XPoet <i@xpoet.cn>
Date: Thu, 31 Dec 2020 16:28:39 +0800
Subject: [PATCH] perf: image viewer add animation when opening

---
 layout/_partial/image-viewer.ejs             |  4 +-
 source/css/layout/_partial/image-viewer.styl | 39 ++++++++++++--------
 source/css/layout/common/markdown.styl       |  2 +-
 source/js/utils.js                           | 12 ++++--
 4 files changed, 33 insertions(+), 24 deletions(-)

diff --git a/layout/_partial/image-viewer.ejs b/layout/_partial/image-viewer.ejs
index 0a80b69..2573efe 100644
--- a/layout/_partial/image-viewer.ejs
+++ b/layout/_partial/image-viewer.ejs
@@ -1,5 +1,3 @@
 <div class="image-viewer-container">
-    <div class="img-box">
-        <img src="">
-    </div>
+    <img src="">
 </div>
diff --git a/source/css/layout/_partial/image-viewer.styl b/source/css/layout/_partial/image-viewer.styl
index c295362..d40151b 100644
--- a/source/css/layout/_partial/image-viewer.styl
+++ b/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;
+  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();
 
-
-  .img-box {
-    position: relative;
-    width: 80%;
-    height: 100%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
+  &.active {
+    background: rgba(0, 0, 0, 0.5);
+    visibility: visible;
 
     img {
-      max-width: 100%;
-      max-height: 100%;
-      cursor: pointer;
+      cursor: zoom-out;
+      transform: scale(1);
+      padding: 2px;
+      background: var(--background-color);
     }
   }
+
+  img {
+    max-width: 100%;
+    max-height: 100%;
+    transform: scale(0);
+    transition();
+  }
 }
+
+
diff --git a/source/css/layout/common/markdown.styl b/source/css/layout/common/markdown.styl
index 9a5d816..1a52756 100644
--- a/source/css/layout/common/markdown.styl
+++ b/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);
 
diff --git a/source/js/utils.js b/source/js/utils.js
index 8452b1a..848519d 100644
--- a/source/js/utils.js
+++ b/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);
       }
     },