From 6e101bea024e8ce41d620ba21b910ff27c5d891c Mon Sep 17 00:00:00 2001
From: songyih <songyih1996@gmail.com>
Date: Mon, 10 Feb 2020 22:01:45 -0800
Subject: [PATCH] optimized fade in effect

---
 src/assets/cards.css                          | 10 +++++++---
 src/components/GameBoard/DoudizhuGameBoard.js |  4 ++--
 2 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/src/assets/cards.css b/src/assets/cards.css
index 4353690..af673bb 100644
--- a/src/assets/cards.css
+++ b/src/assets/cards.css
@@ -19,15 +19,19 @@
 
 .playingCards {
     visibility: visible;
-    transform: translateY(0);
+    transform: translateY(0) scale(1);
     transition: visibility 0s, opacity 0.2s, transform 0.3s;
     opacity: 1;
 }
 
+.playingCards.scale-fade-in {
+    visibility: hidden;
+    transform: translateY(-10px) scale(1.2);
+    opacity: 0;
+}
+
 .playingCards.fade-in {
     visibility: hidden;
-    transform: translateY(-10px);
-    /*transition: visibility 0.1s, opacity 0.05s;*/
     opacity: 0;
 }
 
diff --git a/src/components/GameBoard/DoudizhuGameBoard.js b/src/components/GameBoard/DoudizhuGameBoard.js
index 743176b..d231416 100644
--- a/src/components/GameBoard/DoudizhuGameBoard.js
+++ b/src/components/GameBoard/DoudizhuGameBoard.js
@@ -89,9 +89,9 @@ class DoudizhuGameBoard extends React.Component {
 
             let fadeClassName = "";
             if(this.props.toggleFade === "fade-out" && (playerIdx+2)%3 === this.props.currentPlayer)
-                fadeClassName = this.props.toggleFade;
+                fadeClassName = "fade-out";
             else if(this.props.toggleFade === "fade-in" && (playerIdx+1)%3 === this.props.currentPlayer)
-                fadeClassName = this.props.toggleFade;
+                fadeClassName = "scale-fade-in";
             return this.computeSingleLineHand(this.props.latestAction[playerIdx], fadeClassName)
         }
     }