From a1e1b30df73b8138e77961f00c40797478e68763 Mon Sep 17 00:00:00 2001
From: Terry Truong <terry06890@gmail.com>
Date: Fri, 25 Mar 2022 17:14:17 +1100
Subject: Simplify transition code

---
 src/components/Settings.vue | 10 ++++------
 1 file changed, 4 insertions(+), 6 deletions(-)

(limited to 'src/components/Settings.vue')

diff --git a/src/components/Settings.vue b/src/components/Settings.vue
index e596e46..0c7f360 100644
--- a/src/components/Settings.vue
+++ b/src/components/Settings.vue
@@ -41,7 +41,7 @@ export default defineComponent({
 <div class="fixed left-0 top-0 w-full h-full overflow-hidden invisible"
 	@click="closeClicked">
 	<!-- outer div prevents overflow from transitioning to/from off-screen -->
-	<Transition name="slide-bottom-right">
+	<transition name="slide-bottom-right">
 		<div v-if="isOpen"
 			class="absolute bottom-4 right-4 min-w-[5cm] p-3 bg-stone-50 visible rounded-md shadow shadow-black">
 			<div class="absolute top-2 right-2 w-[24px] h-[24px] [font-size:24px] [line-height:24px] text-center
@@ -114,10 +114,8 @@ export default defineComponent({
 					v-model.number="componentOptions.transitionDuration"/></label>
 			</div>
 		</div>
-	</Transition>
-	<Transition name="slide-bottom-right">
-		<!-- outer div prevents transition interference with inner rotate -->
-		<div v-if="!isOpen" class="absolute bottom-0 right-0 w-[100px] h-[100px]">
+		<div v-else class="absolute bottom-0 right-0 w-[100px] h-[100px]">
+			<!-- outer div prevents transition interference with inner rotate -->
 			<div class="absolute bottom-[-50px] right-[-50px] w-[100px] h-[100px] visible -rotate-45
 				bg-black text-white hover:cursor-pointer" @click="openClicked">
 				<svg class="w-[24px] h-[24px] mx-auto mt-[9px]"
@@ -138,7 +136,7 @@ export default defineComponent({
 				</svg>
 			</div>
 		</div>
-	</Transition>
+	</transition>
 </div>
 </template>
 
-- 
cgit v1.2.3