From 27daa29b95fa672f306d9246e5f64dbb24cf33c4 Mon Sep 17 00:00:00 2001
From: kawamataryo <ba068082@gmail.com>
Date: Tue, 3 Oct 2023 10:03:09 +0900
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20add=20insert=20animation?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/lib/components/BskyUserCell.ts |  2 +-
 src/lib/components/NotFoundCell.ts |  2 +-
 src/lib/components/ReloadBtn.ts    |  2 +-
 src/style.content.css              | 15 +++++++++++++++
 4 files changed, 18 insertions(+), 3 deletions(-)

diff --git a/src/lib/components/BskyUserCell.ts b/src/lib/components/BskyUserCell.ts
index 0c7bbe3..9e71d83 100644
--- a/src/lib/components/BskyUserCell.ts
+++ b/src/lib/components/BskyUserCell.ts
@@ -123,7 +123,7 @@ export const BskyUserCell = ({
 }) => {
   return div({ class: "bsky-user-content-wrapper" },
     MatchTypeLabel({ matchType }),
-    div({ class: "bsky-user-content" },
+    div({ class: "bsky-user-content bsky-fade-in" },
       div({ class: "icon-section" },
         a({ href: `https://bsky.app/profile/${profile.handle}`, target: "_blank", rel: "noopener" },
           Avatar({ avatar: profile.avatar }),
diff --git a/src/lib/components/NotFoundCell.ts b/src/lib/components/NotFoundCell.ts
index 1c53dae..2d1e747 100644
--- a/src/lib/components/NotFoundCell.ts
+++ b/src/lib/components/NotFoundCell.ts
@@ -20,7 +20,7 @@ const WarningIcon = () => svg(
 )
 
 export const NotFoundCell = () => div({ class: "bsky-user-content-wrapper" },
-  div({ class: "bsky-user-content bsky-user-content__not-found" },
+  div({ class: "bsky-user-content bsky-user-content__not-found bsky-fade-in" },
     WarningIcon(),
     p({
       class: "not-found"
diff --git a/src/lib/components/ReloadBtn.ts b/src/lib/components/ReloadBtn.ts
index cb3a6d3..646b312 100644
--- a/src/lib/components/ReloadBtn.ts
+++ b/src/lib/components/ReloadBtn.ts
@@ -8,7 +8,7 @@ export const ReloadButton = ({clickAction}: {clickAction: () => void}) => {
   return () => deleted.val ? null : div({ class: "bsky-reload-btn-wrapper" },
   button(
     {
-      class: "bsky-reload-btn",
+      class: "bsky-reload-btn bsky-fade-in",
       onclick: () => {
         clickAction()
         deleted.val = true
diff --git a/src/style.content.css b/src/style.content.css
index b5b29a4..edec2fc 100644
--- a/src/style.content.css
+++ b/src/style.content.css
@@ -193,3 +193,18 @@
       box-shadow: 0 0 0 0 rgba(233, 30, 99, 0);
   }
 }
+
+@keyframes fade-in {
+  0% {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.bsky-fade-in {
+  animation: fade-in 0.5s ease-in-out;
+}