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/TileTree.vue | 13 ++++++++++++-
 1 file changed, 12 insertions(+), 1 deletion(-)

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

diff --git a/src/components/TileTree.vue b/src/components/TileTree.vue
index 10a437d..1c08085 100644
--- a/src/components/TileTree.vue
+++ b/src/components/TileTree.vue
@@ -251,7 +251,10 @@ export default defineComponent({
 	<parent-bar v-if="sepdParents != null"
 		:pos="[0,0]" :dims="parentBarDims" :nodes="sepdParents" :options="componentOptions"
 		@sepd-parent-clicked="onSepdParentClicked" @info-icon-clicked="onInnerInfoIconClicked"/>
-	<tile-info-modal :tolNode="infoModalNode" :options="componentOptions" @info-modal-close="onInfoModalClose"/>
+	<transition name="fade">
+		<tile-info-modal v-if="infoModalNode != null" :tolNode="infoModalNode" :options="componentOptions"
+			@info-modal-close="onInfoModalClose"/>
+	</transition>
 	<settings :isOpen="settingsOpen" :layoutOptions="layoutOptions" :componentOptions="componentOptions"
 		@settings-open="onSettingsOpen" @settings-close="onSettingsClose"
 		@layout-option-change="onLayoutOptionChange"/>
@@ -293,4 +296,12 @@ export default defineComponent({
 		transform: translate3d(0,0,0) scale(1, 1);
 	}
 }
+.fade-enter-from, .fade-leave-to {
+	opacity: 0;
+}
+.fade-enter-active, .fade-leave-active {
+	transition-property: opacity;
+	transition-duration: 300ms;
+	transition-timing-function: ease-out;
+}
 </style>
-- 
cgit v1.2.3