From 3dfb9af7c9f3843cc7d23812864b55e9a67c8062 Mon Sep 17 00:00:00 2001
From: Daniel Egger <daniel.egger@gmail.com>
Date: Mon, 20 Jun 2022 18:22:39 +0200
Subject: [PATCH] Add transition

---
 client/src/views/CircleView.vue | 96 +++++++++++++++++++--------------
 1 file changed, 56 insertions(+), 40 deletions(-)

diff --git a/client/src/views/CircleView.vue b/client/src/views/CircleView.vue
index c2d966c8..157430d6 100644
--- a/client/src/views/CircleView.vue
+++ b/client/src/views/CircleView.vue
@@ -26,58 +26,74 @@ onMounted(() => {
 </script>
 
 <template>
-  <div v-if="state.showOverview">
-    <CircleOverview :circle-data="circleStore.circleData" @close="state.showOverview = false"/>
-  </div>
-  <div v-else>
-    <MainNavigationBar/>
+  <Transition>
+    <div v-if="state.showOverview">
+      <CircleOverview :circle-data="circleStore.circleData" @close="state.showOverview = false"/>
+    </div>
+    <div v-else>
+      <MainNavigationBar/>
 
-    <div class="circle">
-      <div class="flex flex-col lg:flex-row">
-        <div class="flex-initial lg:w-128 px-4 py-8 lg:px-8">
-          <h1 class="text-blue-dark text-7xl">
-            {{ circleStore.circleData.title }}
-          </h1>
+      <div class="circle">
+        <div class="flex flex-col lg:flex-row">
+          <div class="flex-initial lg:w-128 px-4 py-8 lg:px-8">
+            <h1 class="text-blue-dark text-7xl">
+              {{ circleStore.circleData.title }}
+            </h1>
 
-          <div class="mt-8">
-            <img src="@/assets/circle-analyse.svg" alt="">
-          </div>
-
-          <div class="outcome border border-gray-500 mt-8 p-6">
-            <h3 class="text-blue-dark">Das lernst du in diesem Circle.</h3>
-            <div class="prose mt-4">
-              {{ circleStore.circleData.description }}
+            <div class="mt-8">
+              <img src="@/assets/circle-analyse.svg" alt="">
             </div>
 
-            <button class="btn-primary mt-4" @click="state.showOverview = true">Erfahre mehr dazu</button>
+            <div class="outcome border border-gray-500 mt-8 p-6">
+              <h3 class="text-blue-dark">Das lernst du in diesem Circle.</h3>
+              <div class="prose mt-4">
+                {{ circleStore.circleData.description }}
+              </div>
+
+              <button class="btn-primary mt-4" @click="state.showOverview = true">Erfahre mehr dazu</button>
+            </div>
+
+            <div class="expert border border-gray-500 mt-8 p-6">
+              <h3 class="text-blue-dark">Hast du Fragen?</h3>
+              <div class="prose mt-4">Tausche dich mit der Fachexpertin aus für den Circle Analyse aus.</div>
+              <button class="btn-secondary mt-4">
+                Fachexpertin kontaktieren
+              </button>
+            </div>
           </div>
 
-          <div class="expert border border-gray-500 mt-8 p-6">
-            <h3 class="text-blue-dark">Hast du Fragen?</h3>
-            <div class="prose mt-4">Tausche dich mit der Fachexpertin aus für den Circle Analyse aus.</div>
-            <button class="btn-secondary mt-4">
-              Fachexpertin kontaktieren
-            </button>
+          <div class="flex-auto bg-gray-100 px-4 py-8 lg:px-24">
+            <div
+              v-for="learningSequence in circleStore.circleData.learningSequences"
+              :key="learningSequence.translation_key"
+            >
+              <LearningSequence
+                :learning-sequence="learningSequence" @toggleLearningContentCheckbox="toggleLearningContentCheckbox"
+                :completion-data="circleStore.completionData"
+              ></LearningSequence>
+            </div>
+
           </div>
         </div>
 
-        <div class="flex-auto bg-gray-100 px-4 py-8 lg:px-24">
-          <div
-            v-for="learningSequence in circleStore.circleData.learningSequences"
-            :key="learningSequence.translation_key"
-          >
-            <LearningSequence
-              :learning-sequence="learningSequence" @toggleLearningContentCheckbox="toggleLearningContentCheckbox"
-              :completion-data="circleStore.completionData"
-            ></LearningSequence>
-          </div>
-
-        </div>
       </div>
-
     </div>
-  </div>
+  </Transition>
 </template>
 
 <style scoped>
+
+.v-enter-active,
+.v-leave-active {
+  transition: opacity 0.3s ease;
+}
+
+.v-enter-from,
+.v-leave-to {
+  opacity: 0;
+}
+
+.v-enter-active {
+  transition-delay: 0.3s;
+}
 </style>