feat: fadeinアニメーションを追加

taga3s · Apr 29, 2024 · d62cf54 · d62cf54
1 parent 37dfc5b
commit d62cf54
Show file tree

Hide file tree

Showing 6 changed files with 66 additions and 45 deletions.
diff --git a/src/features/common/components/layouts/FadeInLayout.tsx b/src/features/common/components/layouts/FadeInLayout.tsx
@@ -0,0 +1,9 @@
+import { ReactNode } from "@tanstack/react-router";
+import { FC } from "react";
+
+type Props = {
+  children: ReactNode;
+};
+export const FadeInLayout: FC<Props> = ({ children }) => {
+  return <div className="animate-fadein">{children}</div>;
+};
diff --git a/src/routes/analytics/index.lazy.tsx b/src/routes/analytics/index.lazy.tsx
@@ -2,6 +2,7 @@ import { createLazyFileRoute } from "@tanstack/react-router";
 import { AnalyticsPresenter } from "../../features/analytics/components/AnalyticsPresenter";
 import { ContentLayout, Header, Loading, LoadingContainer, Menu } from "../../features/common/components";
 import { Suspense } from "react";
+import { FadeInLayout } from "../../features/common/components/layouts/FadeInLayout";
 
 export const Route = createLazyFileRoute("/analytics/")({
   component: () => <Analytics />,
@@ -11,17 +12,19 @@ const Analytics = () => {
   return (
     <>
       <Header />
-      <ContentLayout>
-        <Suspense
-          fallback={
-            <LoadingContainer>
-              <Loading />
-            </LoadingContainer>
-          }
-        >
-          <AnalyticsPresenter />
-        </Suspense>
-      </ContentLayout>
+      <FadeInLayout>
+        <ContentLayout>
+          <Suspense
+            fallback={
+              <LoadingContainer>
+                <Loading />
+              </LoadingContainer>
+            }
+          >
+            <AnalyticsPresenter />
+          </Suspense>
+        </ContentLayout>
+      </FadeInLayout>
       <Menu />
     </>
   );

diff --git a/src/routes/manage/index.lazy.tsx b/src/routes/manage/index.lazy.tsx
@@ -3,6 +3,7 @@ import { ContentLayout, Header, Loading, LoadingContainer, Menu } from "../../fe
 import { SearchModalIsOpenProvider } from "../../features/common/contexts/searchModalIsOpenContext";
 import { ManagePresenter } from "../../features/manage/components/ManagePresenter";
 import { Suspense } from "react";
+import { FadeInLayout } from "../../features/common/components/layouts/FadeInLayout";
 
 export const Route = createLazyFileRoute("/manage/")({
   component: () => <Manage />,
@@ -12,17 +13,19 @@ const Manage = () => {
   return (
     <SearchModalIsOpenProvider>
       <Header />
-      <ContentLayout>
-        <Suspense
-          fallback={
-            <LoadingContainer>
-              <Loading />
-            </LoadingContainer>
-          }
-        >
-          <ManagePresenter />
-        </Suspense>
-      </ContentLayout>
+      <FadeInLayout>
+        <ContentLayout>
+          <Suspense
+            fallback={
+              <LoadingContainer>
+                <Loading />
+              </LoadingContainer>
+            }
+          >
+            <ManagePresenter />
+          </Suspense>
+        </ContentLayout>
+      </FadeInLayout>
       <Menu />
     </SearchModalIsOpenProvider>
   );

diff --git a/src/routes/profile/index.lazy.tsx b/src/routes/profile/index.lazy.tsx
@@ -2,6 +2,7 @@ import { createLazyFileRoute } from "@tanstack/react-router";
 import { ContentLayout, Header, Loading, LoadingContainer, Menu } from "../../features/common/components";
 import { ProfilePresenter } from "../../features/profile/components/ProfilePresenter";
 import { Suspense } from "react";
+import { FadeInLayout } from "../../features/common/components/layouts/FadeInLayout";
 
 export const Route = createLazyFileRoute("/profile/")({
   component: () => <Profile />,
@@ -11,17 +12,19 @@ const Profile = () => {
   return (
     <>
       <Header />
-      <ContentLayout>
-        <Suspense
-          fallback={
-            <LoadingContainer>
-              <Loading />
-            </LoadingContainer>
-          }
-        >
-          <ProfilePresenter />
-        </Suspense>
-      </ContentLayout>
+      <FadeInLayout>
+        <ContentLayout>
+          <Suspense
+            fallback={
+              <LoadingContainer>
+                <Loading />
+              </LoadingContainer>
+            }
+          >
+            <ProfilePresenter />
+          </Suspense>
+        </ContentLayout>
+      </FadeInLayout>
       <Menu />
     </>
   );

diff --git a/src/routes/quests/index.lazy.tsx b/src/routes/quests/index.lazy.tsx
@@ -2,6 +2,7 @@ import { createLazyFileRoute } from "@tanstack/react-router";
 import { ContentLayout, Header, Loading, LoadingContainer, Menu } from "../../features/common/components";
 import { QuestsPresenter } from "../../features/quests/components/QuestsPresenter";
 import { Suspense } from "react";
+import { FadeInLayout } from "../../features/common/components/layouts/FadeInLayout";
 
 export const Route = createLazyFileRoute("/quests/")({
   component: () => <Quests />,
@@ -11,17 +12,19 @@ const Quests = () => {
   return (
     <>
       <Header />
-      <ContentLayout>
-        <Suspense
-          fallback={
-            <LoadingContainer>
-              <Loading />
-            </LoadingContainer>
-          }
-        >
-          <QuestsPresenter />
-        </Suspense>
-      </ContentLayout>
+      <FadeInLayout>
+        <ContentLayout>
+          <Suspense
+            fallback={
+              <LoadingContainer>
+                <Loading />
+              </LoadingContainer>
+            }
+          >
+            <QuestsPresenter />
+          </Suspense>
+        </ContentLayout>
+      </FadeInLayout>
       <Menu />
     </>
   );

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -41,7 +41,7 @@ export default {
       },
       animation: {
         expbar: "expbar 0.5s ease-out 1",
-        fadein: "fadein 0.2s ease-out 1",
+        fadein: "fadein 0.24s ease-out 1",
       },
     },
   },