style(editor): new transitions

Novout · Mar 17, 2022 · a740fbe · a740fbe
1 parent 72d72be
commit a740fbe
Show file tree

Hide file tree

Showing 5 changed files with 38 additions and 2 deletions.
diff --git a/packages/better-write-app/src/components/editor/aside/graph/AsideGraphItem.vue b/packages/better-write-app/src/components/editor/aside/graph/AsideGraphItem.vue
@@ -7,6 +7,16 @@
       props.entity.type !== 'line-break' &&
       props.entity.raw !== env.emptyLine()
     "
+    v-motion
+    :initial="{ opacity: 0, x: 10 }"
+    :enter="{
+      opacity: 1,
+      x: 0,
+      transition: {
+        delay: 0,
+        duration: 120,
+      },
+    }"
     class="cursor-pointer bg-theme-aside-graph-background hover:bg-theme-aside-graph-background-hover active:bg-theme-aside-graph-background-active text-theme-aside-graph-text hover:text-theme-aside-graph-text-hover active:text-theme-aside-graph-text-active transition"
     :class="[
       props.entity.type === 'heading-one'

diff --git a/packages/better-write-app/src/components/editor/header/EditorHeaderBar.vue b/packages/better-write-app/src/components/editor/header/EditorHeaderBar.vue
@@ -1,5 +1,15 @@
 <template>
   <div
+    v-motion
+    :initial="{ opacity: 0, y: 10 }"
+    :enter="{
+      opacity: 1,
+      y: 0,
+      transition: {
+        delay: 0,
+        duration: 150,
+      },
+    }"
     class="absolute shadow-xl rounded top-8 md:top-9 lg:top-10 flex flex-col w-48 md:w-52 lg:w-72 z-40 bg-theme-editor-header-list-background"
   >
     <slot />

diff --git a/...-write-app/src/components/editor/project/statistics/base/EditortProjectStatisticsBase.vue b/...-write-app/src/components/editor/project/statistics/base/EditortProjectStatisticsBase.vue
@@ -1,5 +1,11 @@
 <template>
-  <div class="flex flex-1 flex-col w-full md:w-96 p-3 shadow-lg">
+  <div
+    v-motion
+    :initial="{ opacity: 0, y: 10 }"
+    :enter="{ opacity: 1, y: 0 }"
+    :delay="50"
+    class="flex flex-1 flex-col w-full md:w-96 p-3 shadow-lg"
+  >
     <h2 class="font-bold font-poppins text-lg mb-5">
       {{ t('editor.addons.statistics.global') }}
     </h2>

diff --git a/...rite-app/src/components/editor/project/statistics/base/EditortProjectStatisticsImpact.vue b/...rite-app/src/components/editor/project/statistics/base/EditortProjectStatisticsImpact.vue
@@ -1,5 +1,9 @@
 <template>
   <div
+    v-motion
+    :initial="{ opacity: 0, y: 10 }"
+    :enter="{ opacity: 1, y: 0 }"
+    :delay="50"
     class="flex max-h-full md:max-h-96 flex-1 flex-col w-full p-3 shadow-lg overflow-y-auto"
   >
     <h2 class="font-bold font-poppins text-lg mb-5">

diff --git a/...-write-app/src/components/editor/project/statistics/base/EditortProjectStatisticsWord.vue b/...-write-app/src/components/editor/project/statistics/base/EditortProjectStatisticsWord.vue
@@ -1,5 +1,11 @@
 <template>
-  <div class="flex flex-1 flex-col w-full p-3 shadow-lg">
+  <div
+    v-motion
+    :initial="{ opacity: 0, y: 10 }"
+    :enter="{ opacity: 1, y: 0 }"
+    :delay="300"
+    class="flex flex-1 flex-col w-full p-3 shadow-lg"
+  >
     <div class="flex gap-5 justify-around flex-wrap w-full items-center">
       <div class="flex">
         <h2 class="font-bold font-poppins text-lg mr-5">