From 2f86fc56ceadb9f1a28e6b8056cd7e6aa05d28ed Mon Sep 17 00:00:00 2001
From: Fredrick W Warren <fredwarren@gmail.com>
Date: Thu, 11 Feb 2021 13:36:28 -0800
Subject: [PATCH] 14.09 Transitions - Animate the Showing & Hiding of
 Components

---
 quasar.conf.js                          |  5 +++-
 src/components/Tasks/NoTasks.vue        | 30 +++++++++++++----------
 src/components/Tasks/TasksCompleted.vue | 32 +++++++++++++++----------
 src/components/Tasks/TasksTodo.vue      | 32 +++++++++++++++----------
 src/pages/PageTodo.vue                  | 26 ++++++++++----------
 5 files changed, 74 insertions(+), 51 deletions(-)

diff --git a/quasar.conf.js b/quasar.conf.js
index b16d9ea..df876ed 100644
--- a/quasar.conf.js
+++ b/quasar.conf.js
@@ -106,7 +106,10 @@ module.exports = function (/* ctx */) {
 
     // animations: 'all', // --- includes all animations
     // https://quasar.dev/options/animations
-    animations: [],
+    animations: [
+      'zoomIn',
+      'zoomOut'
+    ],
 
     // https://quasar.dev/quasar-cli/developing-ssr/configuring-ssr
     ssr: {
diff --git a/src/components/Tasks/NoTasks.vue b/src/components/Tasks/NoTasks.vue
index c297d3c..e5c180a 100644
--- a/src/components/Tasks/NoTasks.vue
+++ b/src/components/Tasks/NoTasks.vue
@@ -1,16 +1,22 @@
 <template>
-  <q-banner class="bg-grey-3">
-    <template v-slot:avatar>
-    <q-icon name="check" color="primary" />
-    </template>
-      No tasks to do today!
-    <template v-slot:action>
-    <q-btn
-      @click="$root.$emit('showAddTask')"
-      flat color="primary"
-      label="Add Task" />
-    </template>
-  </q-banner>
+  <transition
+    appear
+    enter-active-class="animated zoomIn"
+    leave-active-class="animated zoomOut absolute-top"
+  >
+      <q-banner class="bg-grey-3">
+      <template v-slot:avatar>
+      <q-icon name="check" color="primary" />
+      </template>
+        No tasks to do today!
+      <template v-slot:action>
+      <q-btn
+        @click="$root.$emit('showAddTask')"
+        flat color="primary"
+        label="Add Task" />
+      </template>
+    </q-banner>
+  </transition>
 </template>
 
 <script>
diff --git a/src/components/Tasks/TasksCompleted.vue b/src/components/Tasks/TasksCompleted.vue
index a817b96..4df4248 100644
--- a/src/components/Tasks/TasksCompleted.vue
+++ b/src/components/Tasks/TasksCompleted.vue
@@ -1,18 +1,24 @@
 <template>
-  <div class="q-mt-lg">
-    <list-header bgColor="bg-green-4">Completed</list-header>
-    <q-list
-      separator
-      bordered>
+  <transition
+    appear
+    enter-active-class="animated zoomIn"
+    leave-active-class="animated zoomOut"
+  >
+    <div class="q-mt-lg">
+      <list-header bgColor="bg-green-4">Completed</list-header>
+      <q-list
+        separator
+        bordered>
 
-      <task
-        v-for="(task, key) in tasksCompleted"
-        :key="key"
-        :task="task"
-        :id="key"
-      ></task>
-    </q-list>
-  </div>
+        <task
+          v-for="(task, key) in tasksCompleted"
+          :key="key"
+          :task="task"
+          :id="key"
+        ></task>
+      </q-list>
+    </div>
+  </transition>
 </template>
 
 <script>
diff --git a/src/components/Tasks/TasksTodo.vue b/src/components/Tasks/TasksTodo.vue
index 030ef56..37bb0d4 100644
--- a/src/components/Tasks/TasksTodo.vue
+++ b/src/components/Tasks/TasksTodo.vue
@@ -1,19 +1,25 @@
 <template>
-  <div>
-    <list-header bgColor="bg-orange-4">Todo</list-header>
-    <q-list
-      separator
-      bordered>
+  <transition
+    appear
+    enter-active-class="animated zoomIn"
+    leave-active-class="animated zoomOut absolute-top"
+  >
+    <div>
+      <list-header bgColor="bg-orange-4">Todo</list-header>
+      <q-list
+        separator
+        bordered>
 
-      <task
-        v-for="(task, key) in tasksTodo"
-        :key="key"
-        :task="task"
-        :id="key"
-      ></task>
+        <task
+          v-for="(task, key) in tasksTodo"
+          :key="key"
+          :task="task"
+          :id="key"
+        ></task>
 
-    </q-list>
-  </div>
+      </q-list>
+    </div>
+  </transition>
 </template>
 
 <script>
diff --git a/src/pages/PageTodo.vue b/src/pages/PageTodo.vue
index f7983b9..9bffd1c 100644
--- a/src/pages/PageTodo.vue
+++ b/src/pages/PageTodo.vue
@@ -6,20 +6,22 @@
       <sort />
     </div>
 
-    <p
-      v-if="search && !Object.keys(tasksTodo).length && !Object.keys(tasksCompleted).length">
-      No Search Results
-    </p>
-    <noTasks
-      v-if="!Object.keys(tasksTodo).length && !search" />
+    <div class="relative-position">
+      <p
+        v-if="search && !Object.keys(tasksTodo).length && !Object.keys(tasksCompleted).length">
+        No Search Results
+      </p>
+      <noTasks
+        v-if="!Object.keys(tasksTodo).length && !search" />
 
-    <tasks-todo
-      v-if="Object.keys(tasksTodo).length"
-      :tasksTodo="tasksTodo" />
+      <tasks-todo
+        v-if="Object.keys(tasksTodo).length"
+        :tasksTodo="tasksTodo" />
 
-    <tasks-completed
-      v-if="Object.keys(tasksCompleted).length"
-      :tasksCompleted="tasksCompleted" />
+      <tasks-completed
+        v-if="Object.keys(tasksCompleted).length"
+        :tasksCompleted="tasksCompleted" />
+    </div>
 
     <div class="absolute-bottom text-center q-mb-lg">
       <q-btn