knowyt/client/src/components/ReadySet.vue

fade-out<template>
  <div class="ready-set">
    <div :class="['ready-set__container', fadeOut ]">
      <div class="ready-set__box1" />
      <div class="ready-set__box2" />
      <div class="ready-set__box3" />
      <div
        :class="['ready-set__text', 'ready-set__text__popup', textSize]"
        :key="text"
      >
        {{ text }}
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: ['text'],
  computed: {
    fadeOut() {
      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'
      }
    },
  },
}
</script>

<style lang="scss">
@import '~/assets/css/components';

.ready-set {
  display: flex;
  position: relative;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;

  &__container {
    position: relative;
    width: 600px;
    height: 600px;
    overflow: hidden;

    &__fade-out {
      animation: fade-out 0.3s linear;
      animation-fill-mode: forwards;
    }
  }

  &__box1 {
    position: absolute;
    left: 100px;
    top: 100px;
    transform: rotate(45deg);
    width: 370px;
    height: 370px;
    border: 15px solid #808040;
    border-radius: 50px;
    background-color: $primary-box-color;
    z-index: 5;
  }

  &__box2 {
    position: absolute;
    left: 90px;
    top: 90px;
    width: 420px;
    height: 420px;
    border-radius: 150px;
    background-color: rgba(128,128,64,0.5);
    animation: spin-rev 5s linear infinite;
    z-index: 4;
  }

  &__box3 {
    position: absolute;
    left: 90px;
    top: 90px;
    width: 420px;
    height: 420px;
    border-radius: 150px;
    background-color: rgba(128,128,64,0.5);
    z-index: 3;
    animation: spin 6s linear infinite;
  }

  &__text {
    position: absolute;
    width: 600px;
    height: 600px;
    line-height: 600px;
    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;
    }

    &__size-big {
      font-size: 250px;
    }

    &__popup {
      animation: pop 0.5s ease-in-out;
    }
  }
}
@keyframes spin { 100% { transform: rotate(360deg); } }
@keyframes spin-rev { 100% { transform: rotate(-360deg); } }
@keyframes pop {
  0% { transform: scale(1.7); }
  25% { transform: scale(2); }
  100% { transform: scale(1); }
}
@keyframes fade-out {
  25% { transform: scale(1.2); }
  100% { transform: scale(0); }
}
</style>