chore: improve home page motion

Signed-off-by: Innei <i@innei.in>
Innei · Apr 18, 2024 · 44f7797 · 44f7797
1 parent e21ffad
commit 44f7797
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 64 deletions.
diff --git a/src/app/(app)/(home)/components/ActivityPostList.tsx b/src/app/(app)/(home)/components/ActivityPostList.tsx
@@ -16,9 +16,10 @@ export const ActivityPostList = () => {
   return (
     <m.section
       initial={{ opacity: 0.0001, y: 50 }}
-      animate={{ opacity: 1, y: 0 }}
+      whileInView={{ opacity: 1, y: 0 }}
       transition={softBouncePreset}
       className="mt-8 flex flex-col gap-4 lg:mt-0"
+      viewport={{ once: true }}
     >
       <h2 className="text-2xl font-medium leading-loose">最近更新的文稿</h2>
       <ul className="shiro-timeline mt-4">

diff --git a/src/app/(app)/(home)/components/ActivityRecent.tsx b/src/app/(app)/(home)/components/ActivityRecent.tsx
@@ -42,9 +42,10 @@ export const ActivityRecent = () => {
   return (
     <m.div
       initial={{ opacity: 0.0001, y: 50 }}
-      animate={{ opacity: 1, y: 0 }}
       transition={softBouncePreset}
       className="mt-8 w-full text-lg lg:mt-0"
+      whileInView={{ opacity: 1, y: 0 }}
+      viewport={{ once: true }}
     >
       <m.h2 className="mb-8 text-2xl font-medium leading-loose lg:ml-14">
         最近发生的事

diff --git a/src/app/(app)/(home)/components/Screen.tsx b/src/app/(app)/(home)/components/Screen.tsx
diff --git a/src/app/(app)/(home)/page.tsx b/src/app/(app)/(home)/page.tsx
@@ -37,7 +37,6 @@ import {
 
 import { ActivityPostList } from './components/ActivityPostList'
 import { ActivityRecent } from './components/ActivityRecent'
-import { InViewScreen, Screen } from './components/Screen'
 
 export default function Home() {
   return (
@@ -103,7 +102,7 @@ const Hero = () => {
       return acc + (cur.text?.length || 0)
     }, 0) * 50
   return (
-    <Screen className="mt-20 lg:mt-[-4.5rem]">
+    <div className="mt-20 h-dvh min-h-[800px] min-w-0 max-w-screen overflow-hidden lg:mt-[-4.5rem]">
       <TwoColumnLayout leftContainerClassName="mt-[120px] lg:mt-0 h-[15rem] lg:h-1/2">
         <>
           <m.div
@@ -194,13 +193,13 @@ const Hero = () => {
           </span>
         </m.div>
       </TwoColumnLayout>
-    </Screen>
+    </div>
   )
 }
 
 const ActivityScreen = () => {
   return (
-    <InViewScreen className="mt-24">
+    <div className="mt-24">
       <TwoColumnLayout
         rightContainerClassName="block lg:flex [&>div]:w-full pr-4"
         leftContainerClassName="[&>div]:w-full"
@@ -210,7 +209,7 @@ const ActivityScreen = () => {
           <ActivityRecent />
         </ErrorBoundary>
       </TwoColumnLayout>
-    </InViewScreen>
+    </div>
   )
 }
 
@@ -272,7 +271,7 @@ const Windsock = () => {
 
   const { present: presentSubscribe } = usePresentSubscribeModal()
   return (
-    <InViewScreen>
+    <>
       <div className="mt-28 flex flex-col center">
         <div className="my-5 text-2xl font-medium">风向标</div>
         <div className="mb-24 opacity-90">去到别去看看？</div>
@@ -281,20 +280,26 @@ const Windsock = () => {
             return (
               <m.li
                 initial={{ opacity: 0.0001, y: 10 }}
-                animate={{
+                viewport={{ once: true }}
+                whileInView={{
                   opacity: 1,
                   y: 0,
                   transition: {
                     stiffness: 641,
                     damping: 23,
                     mass: 3.9,
                     type: 'spring',
+                    delay: index * 0.05,
                   },
                 }}
+                transition={{
+                  delay: 0.001,
+                }}
                 whileHover={{
                   y: -10,
                   transition: {
                     ...microReboundPreset,
+                    delay: 0.001,
                   },
                 }}
                 key={index}
@@ -367,6 +372,6 @@ const Windsock = () => {
           <i className="icon-[material-symbols--notifications-active]" />
         </StyledButton>
       </div>
-    </InViewScreen>
+    </>
   )
 }