From ff191ea07c95cfe0c7ac7e9d9c4693a5cfb4397e Mon Sep 17 00:00:00 2001
From: tangly1024 <tlyong1992@hotmail.com>
Date: Fri, 6 May 2022 14:07:08 +0800
Subject: [PATCH] =?UTF-8?q?=E7=9B=B8=E5=86=8C=E5=8A=A8=E7=94=BB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/NotionPage.js | 49 +++++++++++++++++++++++++---------------
 1 file changed, 31 insertions(+), 18 deletions(-)

diff --git a/components/NotionPage.js b/components/NotionPage.js
index 352dfbea..d1a1a8be 100644
--- a/components/NotionPage.js
+++ b/components/NotionPage.js
@@ -2,6 +2,7 @@ import { NotionRenderer } from 'react-notion-x'
 import dynamic from 'next/dynamic'
 import mediumZoom from 'medium-zoom'
 import React from 'react'
+import anime from 'animejs'
 
 const Code = dynamic(() =>
   import('react-notion-x/build/third-party/code').then((m) => m.Code), { ssr: false }
@@ -31,29 +32,41 @@ const NotionPage = ({ post }) => {
     background: 'rgba(0, 0, 0, 0.2)',
     margin: getMediumZoomMargin()
   })
+
   const zoomRef = React.useRef(zoom ? zoom.clone() : null)
+  React.useEffect(() => {
+    anime({
+      targets: 'div:not(.notion-viewport)', // 动效不能加载图片缩放遮罩上。
+      keyframes: [
+        { translateY: 40 },
+        { translateY: 0 }
+      ],
+      duration: 3000,
+      easing: 'easeInOutSine'
+    })
+  }, [])
 
   setTimeout(() => {
-    if (typeof document === 'undefined') {
-      return
-    }
-    const buttons = document.getElementsByClassName('notion-code-copy')
-    for (const e of buttons) {
-      e.addEventListener('click', fixCopy)
-    }
-    // 将所有container下的所有图片添加medium-zoom
-    const container = document?.getElementById('container')
-    const imgList = container?.getElementsByTagName('img')
-    if (imgList && zoomRef.current) {
-      for (let i = 0; i < imgList.length; i++) {
-        (zoomRef.current).attach(imgList[i])
+    if (typeof document !== 'undefined') {
+      const buttons = document.getElementsByClassName('notion-code-copy')
+      for (const e of buttons) {
+        e.addEventListener('click', fixCopy)
+      }
+      // 将相册gallery下的图片加入放大功能
+      // const container = document?.getElementById('container')
+      const imgList = document?.querySelectorAll('.notion-collection-card-cover img')
+      if (imgList && zoomRef.current) {
+        for (let i = 0; i < imgList.length; i++) {
+          (zoomRef.current).attach(imgList[i])
+        }
+      }
+
+      const cards = document.getElementsByClassName('notion-collection-card')
+      for (const e of cards) {
+        e.removeAttribute('href')
       }
     }
-    const cards = document.getElementsByClassName('notion-collection-card')
-    for (const e of cards) {
-      e.removeAttribute('href')
-    }
-  }, 500)
+  }, 800)
 
   /**
    * 复制代码后，会重复 @see https://github.com/tangly1024/NotionNext/issues/165