14.09 Transitions - Animate the Showing & Hiding of Components

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: {

src/components/Tasks/NoTasks.vue

@@ -1,4 +1,9 @@
 <template>
+  <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" />
@@ -11,6 +16,7 @@
         label="Add Task" />
       </template>
     </q-banner>
+  </transition>
 </template>
 
 <script>

src/components/Tasks/TasksCompleted.vue

@@ -1,4 +1,9 @@
 <template>
+  <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
@@ -13,6 +18,7 @@
         ></task>
       </q-list>
     </div>
+  </transition>
 </template>
 
 <script>

src/components/Tasks/TasksTodo.vue

@@ -1,4 +1,9 @@
 <template>
+  <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
@@ -14,6 +19,7 @@
 
       </q-list>
     </div>
+  </transition>
 </template>
 
 <script>

src/pages/PageTodo.vue

@@ -6,6 +6,7 @@
       <sort />
     </div>
 
+    <div class="relative-position">
       <p
         v-if="search && !Object.keys(tasksTodo).length && !Object.keys(tasksCompleted).length">
         No Search Results
@@ -20,6 +21,7 @@
       <tasks-completed
         v-if="Object.keys(tasksCompleted).length"
         :tasksCompleted="tasksCompleted" />
+    </div>
 
     <div class="absolute-bottom text-center q-mb-lg">
       <q-btn