From 5f95471bb6740fe45ad928a68bffc5c6d0c95562 Mon Sep 17 00:00:00 2001
From: Thaum Rystra <stefanzermatten@gmail.com>
Date: Fri, 15 May 2020 14:23:32 +0200
Subject: [PATCH] Added transitions to tree tab property viewer

---
 .../character/characterSheetTabs/TreeTab.vue  | 31 +++++++++++++------
 1 file changed, 21 insertions(+), 10 deletions(-)

diff --git a/app/imports/ui/creature/character/characterSheetTabs/TreeTab.vue b/app/imports/ui/creature/character/characterSheetTabs/TreeTab.vue
index 6b1c2df3..bd6dfd2b 100644
--- a/app/imports/ui/creature/character/characterSheetTabs/TreeTab.vue
+++ b/app/imports/ui/creature/character/characterSheetTabs/TreeTab.vue
@@ -1,11 +1,11 @@
 <template lang="html">
   <div
     class="tree-tab pa-4"
-    style="max-height: calc(100vh - 96px); display: flex;"
+    style="height: calc(100vh - 96px); display: flex;"
   >
     <v-card
       class="layout row"
-      style="max-height: 100%;"
+      style="height: 100%;"
       data-id="creature-tree-card"
     >
       <div
@@ -64,13 +64,19 @@
             flat
             extended
           >
-            <property-icon
-              :type="selectedProperty && selectedProperty.type"
-              class="mr-2"
-            />
-            <div class="title">
-              {{ getPropertyName(selectedProperty && selectedProperty.type) }}
-            </div>
+            <v-fade-transition mode="out-in">
+              <div
+                :key="selectedProperty && selectedProperty._id"
+                class="title"
+              >
+                <property-icon
+                  :key="selectedProperty && selectedProperty._id"
+                  :type="selectedProperty && selectedProperty.type"
+                  class="mr-2"
+                />
+                {{ getPropertyName(selectedProperty && selectedProperty.type) }}
+              </div>
+            </v-fade-transition>
             <v-spacer />
             <v-btn
               v-if="selectedProperty"
@@ -85,7 +91,12 @@
             class="flex"
             style="overflow-y: auto"
           >
-            <property-viewer :model="selectedProperty" />
+            <v-fade-transition mode="out-in">
+              <property-viewer
+                :key="selectedProperty && selectedProperty._id"
+                :model="selectedProperty"
+              />
+            </v-fade-transition>
           </v-card-text>
         </div>
       </template>