💫 add fade in

ITegs · Jun 6, 2023 · 5ccb7da · 5ccb7da
1 parent b1c4ba8
commit 5ccb7da
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 1 deletion.
diff --git a/src/App.css b/src/App.css
@@ -22,6 +22,12 @@
   font-family: "Bungee";
 }
 
+.Hide {
+  display: none;
+  opacity: 0;
+  height: 0;
+}
+
 .Header {
   position: fixed;
   top: 0;

diff --git a/src/components/Ranking.css b/src/components/Ranking.css
@@ -10,6 +10,7 @@
   color: var(--background);
 
   box-shadow: 3px 3px 8px #818181;
+  transition: all 0.5s ease-in-out;
 }
 
 .RankingFirst {

diff --git a/src/components/Ranking.tsx b/src/components/Ranking.tsx
@@ -11,7 +11,11 @@ export default function Ranking() {
   }, [scoreboard]);
 
   return (
-    <div className="RankingContainer">
+    <div
+      className={
+        scoreboard.length >= 3 ? "RankingContainer" : "RankingContainer Hide"
+      }
+    >
       <div className="RankingSecond">
         <b>2</b>
         <p>