style(dashboard): animations in appear

Novout · Jan 30, 2022 · abbda52 · abbda52
1 parent 796ca05
commit abbda52
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 2 deletions.
diff --git a/packages/better-write-app/src/components/dashboard/DashboardHeader.vue b/packages/better-write-app/src/components/dashboard/DashboardHeader.vue
@@ -1,5 +1,9 @@
 <template>
   <header
+    v-motion
+    :initial="{ opacity: 0 }"
+    :enter="{ opacity: 1 }"
+    :delay="100"
     class="flex items-center justify-between w-full bg-theme-background-2 p-5"
   >
     <h1 class="text-xl font-poppins font-bold wb-text">

diff --git a/packages/better-write-app/src/components/dashboard/DashboardNew.vue b/packages/better-write-app/src/components/dashboard/DashboardNew.vue
@@ -1,5 +1,9 @@
 <template>
   <div
+    v-motion
+    :initial="{ opacity: 0 }"
+    :enter="{ opacity: 1 }"
+    :delay="200"
     class="flex justify-around items-center mt-16 bg-theme-background-1 w-full min-h-60 p-5"
   >
     <HeroIcon

diff --git a/packages/better-write-app/src/components/dashboard/DashboardNewProject.vue b/packages/better-write-app/src/components/dashboard/DashboardNewProject.vue
@@ -1,5 +1,11 @@
 <template>
-  <div class="flex justify-around items-center flex-wrap w-auto">
+  <div
+    v-motion
+    :initial="{ opacity: 0 }"
+    :enter="{ opacity: 1 }"
+    :delay="300"
+    class="flex justify-around items-center flex-wrap w-auto"
+  >
     <img :src="img" class="bg-cover w-28 md:w-40 h-60 md:h-72 mr-0 md:mr-20" />
     <div class="flex justify-between wb-text flex-col flex-wrap w-auto md:w-80">
       <h2 class="font-bold text-xl mt-10 md:mt-0">{{ title }}</h2>

diff --git a/packages/better-write-app/src/components/dashboard/DashboardProjects.vue b/packages/better-write-app/src/components/dashboard/DashboardProjects.vue
@@ -1,5 +1,11 @@
 <template>
-  <div class="flex flex-col w-full p-5">
+  <div
+    v-motion
+    :initial="{ opacity: 0 }"
+    :enter="{ opacity: 1 }"
+    :delay="500"
+    class="flex flex-col w-full p-5"
+  >
     <h2 class="text-2xl font-bold wb-text my-5">
       {{ t('dashboard.projects.title') }}
     </h2>