feat: show ReadySet animation

This commit is contained in:
Settel 2022-08-29 18:03:03 +02:00
parent 250a056fe3
commit 142f2e289c
2 changed files with 157 additions and 4 deletions

View File

@ -19,6 +19,11 @@ $box-primary-disabled-background-color: $box-primary-background-color;
$box-primary-disabled-text-color: darken($box-primary-text-color, 60%);
$box-primary-disabled-border: $box-primary-border;
// Animation Box
$animationbox-background-color: $background-primary-color;
$animationbox-text-color: #ffff88;
$animationbox-border: 15px solid #00a0c0;
$animationbox-animation-color: rgba(0, 104, 152, 0.5);
// Button
$button-background-color: #00a0e0;

View File

@ -1,10 +1,158 @@
<template>
<p>ReadySet.vue</p>
<p>{{ text }}</p>
<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">
defineProps<{
import { computed } from 'vue'
const props = defineProps<{
text: string,
}>()
</script>
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>