feat: add animations to Playground elements (WIP)

client/src/components/Playground.vue

@@ -1,10 +1,10 @@
 <template>
   <div class="playground__container">
     <div class="playground__area">
-      <div class="playground__sources" :class="{ 'playground__sources__show': showSources }">
+      <div class="playground__sources">
         <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" :animation-delay="3" />
+          :disabled="disabledMap[source.id]" :index="index" :show="showMap[source.id] && showSources" />
       </div>
       <div class="playground__spacer" />
       <div class="playground__quote" :class="{ 'playground__quote__show': showQuote}">
@@ -70,6 +70,18 @@ const disabledMap = computed(() => {
 
   return disabledMap
 })
+
+const showMap = ref({} as { [key: string]: boolean})
+window.setTimeout(() => {
+  for (const source of sources) {
+    showMap.value[source.id] = true
+  }
+}, 1000)
+window.setTimeout(() => {
+  for (const source of sources) {
+    showMap.value[source.id] = false
+  }
+}, 3000)
 </script>
 
 <style lang="scss">
@@ -89,14 +101,9 @@ const disabledMap = computed(() => {
 
   &__sources {
     display: flex;
-    visibility: hidden;
     flex-wrap: wrap;
     justify-content: space-around;
     gap: 24px 36px;
-
-    &__show {
-      visibility: visible;
-    }
   }
 
   &__spacer {

client/src/components/SourceCard.vue

@@ -1,5 +1,5 @@
 <template>
-  <div :class="containerClasses" :style="containerStyle">
+  <div :class="containerClasses">
     <div class="source-card__source">
       {{ source.name }}
     </div>
@@ -18,26 +18,23 @@ import type { Source } from '@/composables/engine.d'
 const props = defineProps<{
   source: Source,
   index: number,
+  show: boolean,
   selectable?: boolean,
   selected?: boolean,
   badge?: number,
   disabled?: boolean,
-  animationDelay?: number,
 }>()
 
 const containerClasses = computed(() => {
   return {
     'source-card__container': true,
+    'source-card__container__show': props.show,
     'source-card__container__selectable': props.selectable,
     'source-card__container__selected': props.selected,
     'source-card__container__showBadge': props.badge,
     'source-card__container__disabled': props.disabled,
   }
 })
-
-const containerStyle = {
-  animationDelay: props.disabled ? '0' : `${props.index * 0.25 + (props.animationDelay || 0)}s`,
-}
 </script>
 
 <style lang="scss">
@@ -56,9 +53,16 @@ const containerStyle = {
     background-color: $sourcecard-background-color;
     color: $sourcecard-text-color;
     cursor: not-allowed;
+
     opacity: 0;
-    animation: source-show 1s cubic-bezier(0.2, 2, 0.7, 1.5);
+    position: relative;
-    animation-fill-mode: forwards;
+    top: -40px;
+    transition: opacity 1s linear, top 1s cubic-bezier(0.2, 2, 0.7, 1.5);
+
+    &__show {
+      opacity: 100%;
+      top: 0;
+    }
 
     &__selectable {
       cursor: pointer;
@@ -79,8 +83,7 @@ const containerStyle = {
     }
 
     &__disabled {
-      animation: source-fade-out 0.7s linear;
+      opacity: 10%;
-      animation-fill-mode: forwards;
     }
   }
 
@@ -106,28 +109,4 @@ const containerStyle = {
     user-select: none;
   }
 }
-
-@keyframes source-fade-out {
-  from {
-    opacity: 100%;
-  }
-
-  to {
-    opacity: 10%;
-  }
-}
-
-@keyframes source-show {
-  from {
-    position: relative;
-    top: -40px;
-    opacity: 5%;
-  }
-
-  to {
-    position: relative;
-    top: 0;
-    opacity: 100%;
-  }
-}
 </style>