settel/knowyt
1
0
Fork 0
Code Issues Pull Requests Packages Releases Activity

feat: add animations to Playground elements (WIP)

Browse Source
This commit is contained in:
Settel 2022-09-15 20:14:36 +02:00
parent 10a3ab01da
commit 76456994a8
2 changed files with 33 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
client/src/components/Playground.vue
View File

@ -4,7 +4,7 @@
<div class="playground__sources" :class="{ 'playground__sources__show': showSources }">
<SourceCard v-for="(source, index) in sources" :key="source.id" :source="source" :selectable="selectable"
:selected="selection == source.id" @click="selectSource(source)" :badge="badgeMap[source.id]"
:disabled="disabledMap[source.id]" :index="index" />
:disabled="disabledMap[source.id]" :index="index" :animation-delay="3" />
</div>
<div class="playground__spacer" />
<div class="playground__quote" :class="{ 'playground__quote__show': showQuote}">
@ -111,15 +111,19 @@ const disabledMap = computed(() => {
&__show {
visibility: visible;
animation: quote-show 1s linear;
}
}
&__skip {
visibility: hidden;
align-self: flex-end;
opacity: 0;
&__show {
visibility: visible;
animation: quote-show 0.5s linear 5s;
animation-fill-mode: forwards;
}
}
@ -128,4 +132,13 @@ const disabledMap = computed(() => {
margin: 16px 16px 0 64px;
}
}
@keyframes quote-show {
from {
opacity: 0%;
}
to {
opacity: 100%;
}
}
</style>

36
client/src/components/SourceCard.vue
View File

@ -1,6 +1,8 @@
<template>
<div :class="containerClasses">
<div class="source-card__source">{{ source.name }}</div>
<div :class="containerClasses" :style="containerStyle">
<div class="source-card__source">
{{ source.name }}
</div>
<div v-if="badge" class="source-card__badge-container">
<div class="source-card__badge-text">
{{ badge }}
@ -20,6 +22,7 @@ const props = defineProps<{
selected?: boolean,
badge?: number,
disabled?: boolean,
animationDelay?: number,
}>()
const containerClasses = computed(() => {
@ -29,9 +32,12 @@ const containerClasses = computed(() => {
'source-card__container__selected': props.selected,
'source-card__container__showBadge': props.badge,
'source-card__container__disabled': props.disabled,
[`source-card__container__index_${props.index}`]: true,
}
})
const containerStyle = {
animationDelay: props.disabled ? '0' : `${props.index * 0.25 + (props.animationDelay || 0)}s`,
}
</script>
<style lang="scss">
@ -51,9 +57,7 @@ const containerClasses = computed(() => {
color: $sourcecard-text-color;
cursor: not-allowed;
opacity: 0;
animation-name: source-show;
animation-duration: 1s;
animation-timing-function: cubic-bezier(0.2, 2, 0.7, 1.5);
animation: source-show 1s cubic-bezier(0.2, 2, 0.7, 1.5);
animation-fill-mode: forwards;
&__selectable {
@ -78,17 +82,6 @@ const containerClasses = computed(() => {
animation: source-fade-out 0.7s linear;
animation-fill-mode: forwards;
}
&__index_0 { animation-delay: 0.0s; }
&__index_1 { animation-delay: 0.5s; }
&__index_2 { animation-delay: 1.0s; }
&__index_3 { animation-delay: 1.5s; }
&__index_4 { animation-delay: 2.0s; }
&__index_5 { animation-delay: 2.5s; }
&__index_6 { animation-delay: 3.0s; }
&__index_7 { animation-delay: 3.5s; }
&__index_8 { animation-delay: 4.0s; }
&__index_9 { animation-delay: 4.5s; }
}
&__badge-container {
@ -115,7 +108,13 @@ const containerClasses = computed(() => {
}
@keyframes source-fade-out {
to { opacity: 10%; }
from {
opacity: 100%;
}
to {
opacity: 10%;
}
}
@keyframes source-show {
@ -124,6 +123,7 @@ const containerClasses = computed(() => {
top: -40px;
opacity: 5%;
}
to {
position: relative;
top: 0;