feat(editor): transition entitys page

Novout · Sep 22, 2021 · 6f5c9c3 · 6f5c9c3
1 parent 8345799
commit 6f5c9c3
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 7 deletions.
diff --git a/src/components/editor/main/EditorBase.vue b/src/components/editor/main/EditorBase.vue
@@ -14,12 +14,14 @@
         id="edit"
         class="flex flex-col w-full overflow-y-auto max-h-editor px-14"
       >
-        <TextShow
-          v-for="(page, index) in store.state.context.page"
-          :id="page.type + '-' + page.id"
-          :key="index"
-          :page="page"
-        />
+        <transition-group name="list" tag="p">
+          <TextShow
+            v-for="page in store.state.context.page"
+            :id="page.type + '-' + page.id"
+            :key="page.id"
+            :page="page"
+          />
+        </transition-group>
       </section>
       <TextInput
         v-if="store.state.project.name !== '__NOT_CREATED__'"
@@ -50,3 +52,17 @@
     entry.value = ''
   }
 </script>
+
+<style scoped>
+  .list-enter-active,
+  .list-leave-active {
+    transition: all 200ms;
+  }
+  .list-enter,
+  .list-leave-to {
+    opacity: 0;
+  }
+  .list-move {
+    transition: transform 300ms;
+  }
+</style>
diff --git a/src/components/editor/main/EditorBaseBlocked.vue b/src/components/editor/main/EditorBaseBlocked.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="z-50 flex justify-center items-center w-full h-editor border">
+  <div class="z-50 flex justify-center items-center w-full h-editor">
     <p class="wb-text font-bold">{{ t('editor.aside.project.blocked') }}</p>
   </div>
 </template>