feature: 动画

components/ArticleDetail.js

@@ -40,10 +40,10 @@ export default function ArticleDetail ({ post, blockMap, recommendPosts, prev, n
   return (<>
       <div id="article-wrapper" ref={targetRef} className="flex-grow max-w-5xl mx-auto w-screen md:w-full ">
           <article itemScope itemType="https://schema.org/Movie"
-            className="shadow md:hover:shadow-2xl duration-300 animate__fadeIn animate__animated subpixel-antialiased py-10 px-5 lg:pt-24 md:px-24 xl:px-32 dark:border-gray-700 bg-white dark:bg-gray-800"
+            className="shadow md:hover:shadow-2xl duration-300 subpixel-antialiased py-10 px-5 lg:pt-24 md:px-24 xl:px-32 dark:border-gray-700 bg-white dark:bg-gray-800"
           >
 
-            <header>
+            <header className='animate__slideInDown animate__animated'>
                 {post.type && !post.type.includes('Page') && post?.page_cover && (
                           <div className="w-full h-60 relative lg:h-96 transform duration-200 md:flex-shrink-0 overflow-hidden">
                             <Image
@@ -101,7 +101,7 @@ export default function ArticleDetail ({ post, blockMap, recommendPosts, prev, n
             </header>
 
             {/* Notion文章主体 */}
-            <section id='notion-article' className='px-1'>
+            <section id='notion-article' className='px-1 animate__slideInUp animate__animated'>
               {blockMap && (
                 <NotionRenderer
                   className={`${BLOG.font}`}

components/Live2D.js

@@ -1,39 +1,20 @@
 /* eslint-disable no-undef */
 import { useEffect } from 'react'
 
+let hasLoad = false
 export default function Live2D () {
   useEffect(() => {
-    if (window) {
+    if (window && !hasLoad) {
       initLive2D()
+      hasLoad = true
     }
   })
   return <div className='fixed left-0 bottom-0 hidden md:block lg:ml-24 2xl:ml-36'>
-    <canvas id="live2d" width="280" height="250"></canvas>
+    <canvas id="live2d"className='animate__slideInLeft animate__animated' width="280" height="250"></canvas>
   </div>
 }
 
 function initLive2D () {
-  // 封装异步加载资源的方法
-  function loadExternalResource (url, type) {
-    return new Promise((resolve, reject) => {
-      let tag
-
-      if (type === 'css') {
-        tag = document.createElement('link')
-        tag.rel = 'stylesheet'
-        tag.href = url
-      } else if (type === 'js') {
-        tag = document.createElement('script')
-        tag.src = url
-      }
-      if (tag) {
-        tag.onload = () => resolve(url)
-        tag.onerror = () => reject(url)
-        document.head.appendChild(tag)
-      }
-    })
-  }
-
   // 加载 waifu.css live2d.min.js waifu-tips.js
   if (screen.width >= 768) {
     Promise.all([
@@ -45,3 +26,24 @@ function initLive2D () {
     })
   }
 }
+
+// 封装异步加载资源的方法
+function loadExternalResource (url, type) {
+  return new Promise((resolve, reject) => {
+    let tag
+
+    if (type === 'css') {
+      tag = document.createElement('link')
+      tag.rel = 'stylesheet'
+      tag.href = url
+    } else if (type === 'js') {
+      tag = document.createElement('script')
+      tag.src = url
+    }
+    if (tag) {
+      tag.onload = () => resolve(url)
+      tag.onerror = () => reject(url)
+      document.head.appendChild(tag)
+    }
+  })
+}