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) } }