exitアニメーション追加

Author: ABfry

Diff for: frontend/src/components/Timeline.tsx

@@ -7,7 +7,7 @@ import PostList from '@/components/PostList';
 import fetchPosts from '@/app/timeline/actions/fetchPosts';
 import { useSession } from 'next-auth/react';
 import { FaArrowUp } from 'react-icons/fa';
-import { motion } from 'framer-motion';
+import { motion, AnimatePresence } from 'framer-motion';
 
 // props の型定義
 interface TimelineProps {
@@ -126,20 +126,23 @@ const Timeline = ({ limit, max, targetUserUrl, className }: TimelineProps) => {
       {hasMore && <p className='py-3 text-center'>投稿を取得中...</p>}
       <div ref={targetRef} className='h-px' />
       {!hasMore && <p className='py-3 text-center'>これ以上投稿を取得できません。</p>}
-      {showTopButton && (
-        <motion.div
-          initial={{ opacity: 0, x: '-50%', y: -10 }}
-          animate={{ opacity: 1, x: '-50%', y: 0 }}
-          transition={{ duration: 0.2 }}
-          onClick={() => {
-            window.scrollTo({ top: 0, behavior: 'smooth' });
-          }}
-          className='fixed left-1/2 top-12 my-5 flex items-center justify-center rounded-xl bg-orange-400 px-3 hover:bg-orange-500'
-        >
-          <FaArrowUp color='white' />
-          <a className='py-1 pl-1 text-white shadow-md hover:cursor-pointer'>最新の短歌に戻る</a>
-        </motion.div>
-      )}
+      <AnimatePresence mode='wait'>
+        {showTopButton && (
+          <motion.div
+            initial={{ opacity: 0, x: '-50%', y: -10 }}
+            animate={{ opacity: 1, x: '-50%', y: 0 }}
+            exit={{ opacity: 0, x: '-50%', y: -10 }}
+            transition={{ duration: 0.2 }}
+            onClick={() => {
+              window.scrollTo({ top: 0, behavior: 'smooth' });
+            }}
+            className='fixed left-1/2 top-12 my-5 flex items-center justify-center rounded-xl bg-orange-400 px-3 hover:bg-orange-500'
+          >
+            <FaArrowUp color='white' />
+            <a className='py-1 pl-1 text-white shadow-md hover:cursor-pointer'>最新の短歌に戻る</a>
+          </motion.div>
+        )}
+      </AnimatePresence>
     </div>
   );
 };