changeset 2411:27d3e9eda8b6

client: table component: fade transition for adding/removing items
author Markus Kottlaender <markus@intevation.de>
date Thu, 28 Feb 2019 12:16:27 +0100
parents d9758395e09d
children 0ed53a7a1221
files client/src/components/ui/UITableBody.vue
diffstat 1 files changed, 4 insertions(+), 2 deletions(-) [+]
line wrap: on
line diff
--- a/client/src/components/ui/UITableBody.vue	Thu Feb 28 11:38:20 2019 +0100
+++ b/client/src/components/ui/UITableBody.vue	Thu Feb 28 12:16:27 2019 +0100
@@ -1,5 +1,7 @@
 <template>
-  <div
+  <transition-group
+    name="fade"
+    tag="div"
     class="table-body text-left small"
     :style="'overflow-y: auto; max-height: ' + maxHeight"
     v-if="data.length"
@@ -11,7 +13,7 @@
     >
       <slot :item="item" :index="index"></slot>
     </div>
-  </div>
+  </transition-group>
   <div v-else class="small text-center py-3 border-top">
     <translate>No results.</translate>
   </div>