DouZero
/
rlcard-showdown
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

optimized fade in effect

This commit is contained in:
songyih 2020-02-10 22:01:45 -08:00
parent 7f1310f192
commit 6e101bea02
2 changed files with 9 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/assets/cards.css
View File

@ -19,15 +19,19 @@
.playingCards { .playingCards {
visibility: visible; visibility: visible;
transform: translateY(0); transform: translateY(0) scale(1);
transition: visibility 0s, opacity 0.2s, transform 0.3s; transition: visibility 0s, opacity 0.2s, transform 0.3s;
opacity: 1; opacity: 1;
} }
.playingCards.scale-fade-in {
visibility: hidden;
transform: translateY(-10px) scale(1.2);
opacity: 0;
}
.playingCards.fade-in { .playingCards.fade-in {
visibility: hidden; visibility: hidden;
transform: translateY(-10px);
/*transition: visibility 0.1s, opacity 0.05s;*/
opacity: 0; opacity: 0;
} }

4
src/components/GameBoard/DoudizhuGameBoard.js
View File

@ -89,9 +89,9 @@ class DoudizhuGameBoard extends React.Component {
let fadeClassName = ""; let fadeClassName = "";
if(this.props.toggleFade === "fade-out" && (playerIdx+2)%3 === this.props.currentPlayer) 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) 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) return this.computeSingleLineHand(this.props.latestAction[playerIdx], fadeClassName)
} }
} }