diff options
Diffstat (limited to 'FrontEnd/src')
4 files changed, 24 insertions, 25 deletions
diff --git a/FrontEnd/src/app/views/timeline-common/TimelinePagedPostListView.tsx b/FrontEnd/src/app/views/timeline-common/TimelinePagedPostListView.tsx index 8efdb034..b44a8ef6 100644 --- a/FrontEnd/src/app/views/timeline-common/TimelinePagedPostListView.tsx +++ b/FrontEnd/src/app/views/timeline-common/TimelinePagedPostListView.tsx @@ -2,9 +2,7 @@ import React from "react"; import { HttpTimelinePostInfo } from "@/http/timeline"; -import TimelinePostListView, { - TimelinePostListViewProps, -} from "./TimelinePostListView"; +import TimelinePostListView from "./TimelinePostListView"; export interface TimelinePagedPostListViewProps { className?: string; @@ -21,16 +19,9 @@ const TimelinePagedPostListView: React.FC<TimelinePagedPostListViewProps> = ( const [lastViewCount, setLastViewCount] = React.useState<number>(10); const viewingPosts = React.useMemo(() => { - const p: TimelinePostListViewProps["posts"] = - lastViewCount >= posts.length - ? posts.slice() - : posts.slice(-lastViewCount); - - for (let i = 0; i < p.length; i++) { - p[p.length - i - 1].enterDelay = (i % 10) * 0.4; - } - - return p; + return lastViewCount >= posts.length + ? posts.slice() + : posts.slice(-lastViewCount); }, [posts, lastViewCount]); React.useEffect(() => { diff --git a/FrontEnd/src/app/views/timeline-common/TimelinePostListView.tsx b/FrontEnd/src/app/views/timeline-common/TimelinePostListView.tsx index 4cffe593..bc7b72ad 100644 --- a/FrontEnd/src/app/views/timeline-common/TimelinePostListView.tsx +++ b/FrontEnd/src/app/views/timeline-common/TimelinePostListView.tsx @@ -17,7 +17,7 @@ function dateEqual(left: Date, right: Date): boolean { export interface TimelinePostListViewProps { className?: string; style?: React.CSSProperties; - posts: (HttpTimelinePostInfo & { enterDelay?: number })[]; + posts: HttpTimelinePostInfo[]; onReload: () => void; } @@ -27,12 +27,12 @@ const TimelinePostListView: React.FC<TimelinePostListViewProps> = (props) => { const groupedPosts = React.useMemo< { date: Date; - posts: (HttpTimelinePostInfo & { index: number; enterDelay?: number })[]; + posts: (HttpTimelinePostInfo & { index: number })[]; }[] >(() => { const result: { date: Date; - posts: (HttpTimelinePostInfo & { index: number; enterDelay?: number })[]; + posts: (HttpTimelinePostInfo & { index: number })[]; }[] = []; let index = 0; for (const post of posts) { @@ -65,9 +65,6 @@ const TimelinePostListView: React.FC<TimelinePostListViewProps> = (props) => { post={post} current={posts.length - 1 === post.index} onDeleted={onReload} - cardStyle={{ - animationDelay: `${post.enterDelay ?? 0}s`, - }} /> ); })} diff --git a/FrontEnd/src/app/views/timeline-common/TimelinePostView.tsx b/FrontEnd/src/app/views/timeline-common/TimelinePostView.tsx index 4cafdaa0..4f9c6e97 100644 --- a/FrontEnd/src/app/views/timeline-common/TimelinePostView.tsx +++ b/FrontEnd/src/app/views/timeline-common/TimelinePostView.tsx @@ -30,6 +30,21 @@ const TimelinePostView: React.FC<TimelinePostViewProps> = (props) => { ] = React.useState<boolean>(false); const [deleteDialog, setDeleteDialog] = React.useState<boolean>(false); + // eslint-disable-next-line @typescript-eslint/no-non-null-assertion + const cardRef = React.useRef<HTMLDivElement>(null!); + React.useEffect(() => { + const cardIntersectionObserver = new IntersectionObserver(([e]) => { + if (e.isIntersecting) { + cardRef.current.style.animationName = "timeline-post-enter"; + } + }); + cardIntersectionObserver.observe(cardRef.current); + + return () => { + cardIntersectionObserver.disconnect(); + }; + }, []); + return ( <div id={`timeline-post-${post.id}`} @@ -37,7 +52,7 @@ const TimelinePostView: React.FC<TimelinePostViewProps> = (props) => { style={style} > <TimelineLine center="node" current={current} /> - <div className="timeline-item-card" style={cardStyle}> + <div ref={cardRef} className="timeline-item-card" style={cardStyle}> {post.editable ? ( <i className="bi-chevron-down text-info icon-button float-right" diff --git a/FrontEnd/src/app/views/timeline-common/timeline-common.sass b/FrontEnd/src/app/views/timeline-common/timeline-common.sass index 683a4282..e570b4b4 100644 --- a/FrontEnd/src/app/views/timeline-common/timeline-common.sass +++ b/FrontEnd/src/app/views/timeline-common/timeline-common.sass @@ -42,14 +42,10 @@ $timeline-line-color-current: #36c2e6 from transform: translate(0, -100vh) - to - @keyframes timeline-top-loading-enter from transform: translate(0, -100%) - to - @keyframes timeline-post-enter from transform: translate(0, -100%) @@ -153,7 +149,7 @@ $timeline-line-color-current: #36c2e6 position: relative padding: 0.3em 0.5em 1em 4em transition: background 0.5s, padding-left 0.5s - animation: 0.4s forwards timeline-post-enter + animation: 0.4s forwards opacity: 0 @include media-breakpoint-down(sm) |