🎨 add insert animation

This commit is contained in:
kawamataryo 2023-10-03 10:03:09 +09:00
parent eaa6b88ecb
commit 27daa29b95
4 changed files with 18 additions and 3 deletions

View File

@ -123,7 +123,7 @@ export const BskyUserCell = ({
}) => { }) => {
return div({ class: "bsky-user-content-wrapper" }, return div({ class: "bsky-user-content-wrapper" },
MatchTypeLabel({ matchType }), MatchTypeLabel({ matchType }),
div({ class: "bsky-user-content" }, div({ class: "bsky-user-content bsky-fade-in" },
div({ class: "icon-section" }, div({ class: "icon-section" },
a({ href: `https://bsky.app/profile/${profile.handle}`, target: "_blank", rel: "noopener" }, a({ href: `https://bsky.app/profile/${profile.handle}`, target: "_blank", rel: "noopener" },
Avatar({ avatar: profile.avatar }), Avatar({ avatar: profile.avatar }),

View File

@ -20,7 +20,7 @@ const WarningIcon = () => svg(
) )
export const NotFoundCell = () => div({ class: "bsky-user-content-wrapper" }, 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(), WarningIcon(),
p({ p({
class: "not-found" class: "not-found"

View File

@ -8,7 +8,7 @@ export const ReloadButton = ({clickAction}: {clickAction: () => void}) => {
return () => deleted.val ? null : div({ class: "bsky-reload-btn-wrapper" }, return () => deleted.val ? null : div({ class: "bsky-reload-btn-wrapper" },
button( button(
{ {
class: "bsky-reload-btn", class: "bsky-reload-btn bsky-fade-in",
onclick: () => { onclick: () => {
clickAction() clickAction()
deleted.val = true deleted.val = true

View File

@ -193,3 +193,18 @@
box-shadow: 0 0 0 0 rgba(233, 30, 99, 0); 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;
}