From 25d4831aac40f5438d91d8a303af930e0d97cb2d Mon Sep 17 00:00:00 2001
From: crupest <crupest@outlook.com>
Date: Tue, 13 Apr 2021 18:29:38 +0800
Subject: ...

---
 .../src/app/views/timeline-common/TimelinePostView.tsx  | 17 ++++++++++++++++-
 1 file changed, 16 insertions(+), 1 deletion(-)

(limited to 'FrontEnd/src/app/views/timeline-common/TimelinePostView.tsx')

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"
-- 
cgit v1.2.3