fukasawa 卡片动效

themes/fukasawa/components/BlogCard.js

@@ -16,7 +16,7 @@ const BlogCard = ({ post, showSummary, siteInfo }) => {
     <Card className="w-full lg:max-w-sm p-2 h-full overflow-auto">
       <div
         key={post.id}
-        className="animate__animated animate__fadeIn flex flex-col-reverse justify-between duration-300"
+        className="flex flex-col-reverse justify-between duration-300"
       >
         <div className="p-2 flex flex-col w-full">
           <Link

themes/fukasawa/components/Card.js

@@ -1,9 +1,15 @@
 const Card = ({ children, headerSlot, className }) => {
-  return <div className={className}>
-    <>{headerSlot}</>
-    <section className="shadow mb-4 p-2 bg-white dark:bg-hexo-black-gray hover:shadow-lg duration-200">
-        {children}
-    </section>
-  </div>
+  return <div className={className}
+        data-aos="fade-up"
+        data-aos-duration="600"
+        data-aos-easing="ease-in-out"
+        data-aos-once="false"
+        data-aos-anchor-placement="top-bottom"
+    >
+        <>{headerSlot}</>
+        <section className="shadow mb-4 p-2 bg-white dark:bg-hexo-black-gray hover:shadow-lg duration-200">
+            {children}
+        </section>
+    </div>
 }
 export default Card