add win message animation and fix tie style

HuiGong-dev · Jan 11, 2022 · 46b2e9b · 46b2e9b
1 parent 4381d48
commit 46b2e9b
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 1 deletion.
diff --git a/app.js b/app.js
@@ -231,6 +231,7 @@ function handleCrossWon() {
  } else {
  whoWinsText.innerText = "YOU LOSE!"
  }
+ whoTakesRound.classList.remove('tie');
  whoTakesRoundLogo.classList.remove(LOGO_O);
  whoTakesRoundLogo.classList.add(LOGO_X);
  // if (!whoTakesRoundLogo.classList.contains(LOGO_X)) {
@@ -288,7 +289,7 @@ function endGame(tie) {
  isGameStarted = false;
  setTimeout(() => {
  winningMessage.classList.add(SHOW);
- }, 500);
+ }, 200);
 
 }
 

diff --git a/styles.css b/styles.css
@@ -471,6 +471,26 @@ display: none;
  .winning-message.show {
  display: flex;
  }
+
+
+
+ .winning-message.show .winning-message__banner {
+ animation: slide-in-from-left;
+ animation-duration: 0.3s;
+ animation-fill-mode: forwards;
+
+ }
+
+
+
+ @keyframes slide-in-from-left {
+ 0%{
+ transform: translateX(-100%);
+ }
+ 100%{
+ transform: translate(0);
+ }
+ }
 
  /* intro page */
 .intro {