From 1e261eb3eca7a1d86753bdf9cb3187a1de91116a Mon Sep 17 00:00:00 2001
From: Settel <settel@localhost>
Date: Fri, 16 Sep 2022 22:41:08 +0200
Subject: [PATCH] feat: add animations to Playground elements

---
 client/src/components/Playground.vue | 13 ++++---------
 client/src/components/SourceCard.vue |  9 +++++----
 2 files changed, 9 insertions(+), 13 deletions(-)

diff --git a/client/src/components/Playground.vue b/client/src/components/Playground.vue
index ffeb887..afe6e79 100644
--- a/client/src/components/Playground.vue
+++ b/client/src/components/Playground.vue
@@ -72,16 +72,11 @@ const disabledMap = computed(() => {
 })
 
 const showMap = ref({} as { [key: string]: boolean})
-window.setTimeout(() => {
-  for (const source of sources) {
+sources.forEach((source, index) => {
+  window.setTimeout(() => {
     showMap.value[source.id] = true
-  }
-}, 1000)
-window.setTimeout(() => {
-  for (const source of sources) {
-    showMap.value[source.id] = false
-  }
-}, 3000)
+  }, 1000 + index * 250)
+})
 </script>
 
 <style lang="scss">
diff --git a/client/src/components/SourceCard.vue b/client/src/components/SourceCard.vue
index 7b4fa96..c86eb63 100644
--- a/client/src/components/SourceCard.vue
+++ b/client/src/components/SourceCard.vue
@@ -32,7 +32,7 @@ const containerClasses = computed(() => {
     'source-card__container__selectable': props.selectable,
     'source-card__container__selected': props.selected,
     'source-card__container__showBadge': props.badge,
-    'source-card__container__disabled': props.disabled,
+    'source-card__container__disabled': props.disabled && props.show,
   }
 })
 </script>
@@ -53,15 +53,16 @@ const containerClasses = computed(() => {
     background-color: $sourcecard-background-color;
     color: $sourcecard-text-color;
     cursor: not-allowed;
-
+    
     opacity: 0;
     position: relative;
     top: -40px;
-    transition: opacity 1s linear, top 1s cubic-bezier(0.2, 2, 0.7, 1.5);
-
+    transition: opacity 1s linear, top 999s;
+    
     &__show {
       opacity: 100%;
       top: 0;
+      transition: opacity 1s linear, top 1s cubic-bezier(0.2, 2, 0.7, 1.5);
     }
 
     &__selectable {