From 932d89f6f1a1d003b480b63aa80489f16910e0da Mon Sep 17 00:00:00 2001
From: Terry Truong <terry06890@gmail.com>
Date: Thu, 30 Jun 2022 02:29:15 +1000
Subject: Add tutorial-stage transitions

---
 src/components/TutorialPane.vue | 26 +++++++++++++-------------
 1 file changed, 13 insertions(+), 13 deletions(-)

(limited to 'src')

diff --git a/src/components/TutorialPane.vue b/src/components/TutorialPane.vue
index b11544c..07d818a 100644
--- a/src/components/TutorialPane.vue
+++ b/src/components/TutorialPane.vue
@@ -7,18 +7,12 @@
 		<close-icon @click.stop="onClose"
 			class="block w-6 h-6 hover:cursor-pointer"/>
 	</div>
-	<template v-if="stage == 0">
-		<div :style="contentStyles">
+	<transition name="fade" mode="out-in">
+		<div v-if="stage == 0" :style="contentStyles">
 			This page provides a visualisation of the biological Tree of Life.
 			It is unfinished, and is just here for testing.
 		</div>
-		<div class="w-full flex justify-evenly mt-2">
-			<s-button :style="buttonStyles" @click="onStartTutorial">Start Tutorial</s-button>
-			<s-button :style="buttonStyles" @click="onSkipTutorial">Skip</s-button>
-		</div>
-	</template>
-	<template v-else>
-		<div v-if="stage == 1" :style="contentStyles">
+		<div v-else-if="stage == 1" :style="contentStyles">
 			Clicking/touching a tile expands it and shows it's children.
 		</div>
 		<div v-else-if="stage == 2" :style="contentStyles">
@@ -47,8 +41,14 @@
 		<div v-else-if="stage == 9" :style="contentStyles">
 			And finally, the help icon provides more information.
 		</div>
-		<!-- Buttons -->
-		<div class="w-full flex justify-evenly mt-2">
+	</transition>
+	<!-- Buttons -->
+	<div class="w-full flex justify-evenly mt-2">
+		<template v-if="stage == 0">
+			<s-button :style="buttonStyles" @click="onStartTutorial">Start Tutorial</s-button>
+			<s-button :style="buttonStyles" @click="onSkipTutorial">Skip</s-button>
+		</template>
+		<template v-else>
 			<s-button v-if="hidNextPrevOnce || stage > 1" :disabled="stage == 1"
 				@click="onPrevClick" :style="buttonStyles">
 				Prev
@@ -57,8 +57,8 @@
 				@click="stage != lastStage ? onNextClick() : onClose()" :style="buttonStyles">
 				{{stage != lastStage ? 'Next' : 'Finish'}}
 			</s-button>
-		</div>
-	</template>
+		</template>
+	</div>
 </div>
 </template>
 
-- 
cgit v1.2.3