From 53f01701ad77b61998e73176faa7a076dbb37d3d Mon Sep 17 00:00:00 2001
From: Christian Cueni <christian.cueni@iterativ.ch>
Date: Wed, 27 Jul 2022 09:58:27 +0200
Subject: [PATCH] Add animation

---
 client/src/components/circle/CircleOverview.vue | 12 ++++++++----
 client/src/views/CircleView.vue                 | 12 +++++++-----
 2 files changed, 15 insertions(+), 9 deletions(-)

diff --git a/client/src/components/circle/CircleOverview.vue b/client/src/components/circle/CircleOverview.vue
index df496d6b..ac346d12 100644
--- a/client/src/components/circle/CircleOverview.vue
+++ b/client/src/components/circle/CircleOverview.vue
@@ -1,8 +1,10 @@
 <script setup lang="ts">
+// inspiration https://vuejs.org/examples/#modal
 import {Circle} from '@/services/circle';
 
 const props = defineProps<{
-  circle: Circle
+  circle: Circle,
+  show: boolean
 }>()
 
 const emits = defineEmits(['closemodal'])
@@ -10,8 +12,10 @@ const emits = defineEmits(['closemodal'])
 </script>
 
 <template>
-  <Teleport to="body">
-    <div class="circle-overview px-4 py-16 lg:px-16 lg:py-24 fixed top-0 overflow-y-scroll bg-white h-full">
+  <Transition mode="in-out">
+    <div
+      v-if="show"
+      class="circle-overview px-4 py-16 lg:px-16 lg:py-24 fixed top-0 overflow-y-scroll bg-white h-full">
       <div
         class="w-8 h-8 absolute right-4 top-4 cursor-pointer"
         @click="$emit('closemodal')"
@@ -50,7 +54,7 @@ const emits = defineEmits(['closemodal'])
       </ul>
 
     </div>
-  </Teleport>
+  </Transition>
 </template>
 
 <style scoped>
diff --git a/client/src/views/CircleView.vue b/client/src/views/CircleView.vue
index 8c893a3b..77498f2c 100644
--- a/client/src/views/CircleView.vue
+++ b/client/src/views/CircleView.vue
@@ -26,11 +26,13 @@ onMounted(async () => {
 
 <template>
   <div>
-    <Transition mode="out-in">
-    <div v-if="circleStore.page === 'OVERVIEW'">
-      <CircleOverview :circle="circleStore.circle" @closemodal="circleStore.page = 'INDEX'"/>
-    </div>
-    </Transition>
+    <Teleport to="body">
+      <CircleOverview
+        :circle="circleStore.circle"
+        :show="circleStore.page === 'OVERVIEW'"
+        @closemodal="circleStore.page = 'INDEX'"
+      />
+    </Teleport>
   <Transition mode="out-in">
     <div v-if="circleStore.page === 'LEARNING_CONTENT'">
       <LearningContent :key="circleStore.currentLearningContent.translation_key"/>