ReadySet animation

client/src/components/ReadySet.vue

@@ -1,6 +1,6 @@
-<template>
+fade-out<template>
   <div class="ready-set">
-    <div class="ready-set__container">
+    <div :class="['ready-set__container', flipOut ]">
       <div class="ready-set__box1" />
       <div class="ready-set__box2" />
       <div class="ready-set__box3" />
@@ -18,11 +18,19 @@
 export default {
   props: ['text'],
   computed: {
+    flipOut() {
+      if (this.text === '' ){
+        return 'ready-set__container__fade-out'
+      }
+      return
+    },
     textSize() {
       if (this.text.length < 3) {
         return 'ready-set__text__size-big'
       } else if (this.text.length < 5) {
         return 'ready-set__text__size-medium'
+      } else if (this.text.length > 8) {
+        return 'ready-set__text__size-small'
       }
     },
   },
@@ -39,6 +47,11 @@ export default {
     width: 600px;
     height: 600px;
     overflow: hidden;
+
+    &__fade-out {
+      animation: fade-out 0.3s linear;
+      animation-fill-mode: forwards;
+    }
   }
 
   &__box1 {
@@ -83,12 +96,16 @@ export default {
     width: 600px;
     height: 600px;
     line-height: 600px;
-    font-size: 64px;
+    font-size: 100px;
     font-family: 'Wendy One';
     color: #ffff80;
     text-align: center;
     z-index: 10;
 
+    &__size-small {
+      font-size: 64px;
+    }
+
     &__size-medium {
       font-size: 150px;
     }
@@ -109,4 +126,8 @@ export default {
   25% { transform: scale(2); }
   100% { transform: scale(1); }
 }
+@keyframes fade-out {
+  25% { transform: scale(1.2); } 
+  100% { transform: scale(0); }
+}
 </style>