Browse Source

added loader fade

bach 5 months ago
parent
commit
fb9e7091b4
1 changed files with 13 additions and 2 deletions
  1. 13 2
      src/App.vue

+ 13 - 2
src/App.vue

@@ -127,8 +127,10 @@ export default {
 
   <div id="main-content">
     <MapConcernements>
-      <div class="loading" v-if="mapitems.length === 0">Chargement</div>
-      <template v-else>
+      <transition name="fade">
+        <div class="loading" v-if="mapitems.length === 0">Chargement</div>
+      </transition>
+      <template v-if="mapitems.length > 0">
         <template v-for="(mapitem,index) in mapitems">
           <ConcernementMapItem
             v-if="mapitem.concernement.visible && ((map_mode === 'superposition' && mapitem.clone) || !mapitem.clone)"
@@ -146,4 +148,13 @@ export default {
 </template>
 
 <style lang="scss" scoped>
+  .fade-enter-active,
+  .fade-leave-active {
+    transition: opacity 1s ease;
+  }
+
+  .fade-enter-from,
+  .fade-leave-to {
+    opacity: 0;
+  }
 </style>