knowyt/client/src/components/ReadySet.vue

<template>
  <div class="ready-set__container-outer">
    <div :class="['ready-set__container-inner', 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 setup lang="ts">
import { computed } from 'vue'
const props = defineProps<{
  text: string,
}>()

const fadeOut = computed((): string | null => props.text === '' ? 'ready-set__container-inner__fade-out' : null)
const textSize = computed((): string => {
  if (props.text.length < 3) {
    return 'ready-set__text__size-big'
  } else if (props.text.length < 4) {
    return 'ready-set__text__size-medium'
  } else if (props.text.length > 5) {
    return 'ready-set__text__size-small'
  }
})
</script>

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

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

  &__container-inner {
    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;
    background-color: $animationbox-background-color;
    border: $animationbox-border;
    border-radius: 50px;
    z-index: 5;
  }

  &__box2 {
    position: absolute;
    left: 90px;
    top: 90px;
    width: 420px;
    height: 420px;
    border-radius: 150px;
    background-color: $animationbox-animation-color;
    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: $animationbox-animation-color;
    z-index: 3;
    animation: spin 6s linear infinite;
  }

  &__text {
    position: absolute;
    width: 600px;
    height: 600px;
    line-height: 600px;
    font-size: 100px;
    font-family: $font-primary;
    color: $animationbox-text-color;
    text-align: center;
    z-index: 10;

    &__size-small {
      font-size: 80px;
    }

    &__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>