[ui] Fixed card animation

src/components/Card/index.tsx

@@ -26,27 +26,50 @@ function Card({
 }: CardProps) {
   const [swipe, setSwipe] = useState(0);
   const [smoothMove, setSmoothMove] = useState(false);
+  const [smoothOpacity, setSmoothOpacity] = useState(false);
+
+  const activeSmoothMove = (ms: number) => {
+    setSmoothMove(true);
+    setTimeout(() => setSmoothMove(false), ms);
+  };
+
+  const activeSmoothOpacity = (ms: number) => {
+    setSmoothOpacity(true);
+    setTimeout(() => setSmoothOpacity(false), ms);
+  };
+
+  const activeSmooth = (ms: number) => {
+    activeSmoothMove(ms);
+    activeSmoothOpacity(ms);
+  };
 
   const handlers = useSwipeable({
     onSwiped: (eventData) => {
-      setSmoothMove(true);
-      setTimeout(() => setSmoothMove(false), 100);
+      activeSmooth(100);
       if (eventData.absX > window.innerWidth / 4) {
         if (eventData.dir === 'Left') {
           setSwipe(-window.outerWidth);
-          if (swipeLeftCallback) swipeLeftCallback(eventData);
+          setTimeout(() => {
+            activeSmoothOpacity(200);
+            swipeLeftCallback?.(eventData);
+            setSwipe(0);
+          }, 110);
         } else if (eventData.dir === 'Right') {
           setSwipe(window.outerWidth);
-          if (swipeRightCallBack) swipeRightCallBack(eventData);
+          setTimeout(() => {
+            activeSmoothOpacity(200);
+            swipeRightCallBack?.(eventData);
+            setSwipe(0);
+          }, 110);
         }
       } else {
         setSwipe(0);
       }
-      if (swipedCallBack) swipedCallBack(eventData);
+      swipedCallBack?.(eventData);
     },
     onSwiping: (eventData) => {
       setSwipe(eventData.deltaX);
-      if (swipingCallback) swipingCallback(eventData);
+      swipingCallback?.(eventData);
     },
     trackMouse: true,
     trackTouch: true,
@@ -57,7 +80,8 @@ function Card({
       {...handlers}
       className={classNames(
         styles.card,
-        smoothMove ? 'transition-all duration-200' : '',
+        smoothMove ? 'transition-transform duration-200' : '',
+        smoothOpacity ? 'transition-opacity duration-200' : '',
         className
       )}
       style={{