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,16 +1,22 @@
 <template>
-  <q-banner class="bg-grey-3">
+  <transition
-    <template v-slot:avatar>
+    appear
-    <q-icon name="check" color="primary" />
+    enter-active-class="animated zoomIn"
-    </template>
+    leave-active-class="animated zoomOut absolute-top"
-      No tasks to do today!
+  >
-    <template v-slot:action>
+      <q-banner class="bg-grey-3">
-    <q-btn
+      <template v-slot:avatar>
-      @click="$root.$emit('showAddTask')"
+      <q-icon name="check" color="primary" />
-      flat color="primary"
+      </template>
-      label="Add Task" />
+        No tasks to do today!
-    </template>
+      <template v-slot:action>
-  </q-banner>
+      <q-btn
+        @click="$root.$emit('showAddTask')"
+        flat color="primary"
+        label="Add Task" />
+      </template>
+    </q-banner>
+  </transition>
 </template>
 
 <script>

src/components/Tasks/TasksCompleted.vue

@@ -1,18 +1,24 @@
 <template>
-  <div class="q-mt-lg">
+  <transition
-    <list-header bgColor="bg-green-4">Completed</list-header>
+    appear
-    <q-list
+    enter-active-class="animated zoomIn"
-      separator
+    leave-active-class="animated zoomOut"
-      bordered>
+  >
+    <div class="q-mt-lg">
+      <list-header bgColor="bg-green-4">Completed</list-header>
+      <q-list
+        separator
+        bordered>
 
-      <task
+        <task
-        v-for="(task, key) in tasksCompleted"
+          v-for="(task, key) in tasksCompleted"
-        :key="key"
+          :key="key"
-        :task="task"
+          :task="task"
-        :id="key"
+          :id="key"
-      ></task>
+        ></task>
-    </q-list>
+      </q-list>
-  </div>
+    </div>
+  </transition>
 </template>
 
 <script>

src/components/Tasks/TasksTodo.vue

@@ -1,19 +1,25 @@
 <template>
-  <div>
+  <transition
-    <list-header bgColor="bg-orange-4">Todo</list-header>
+    appear
-    <q-list
+    enter-active-class="animated zoomIn"
-      separator
+    leave-active-class="animated zoomOut absolute-top"
-      bordered>
+  >
+    <div>
+      <list-header bgColor="bg-orange-4">Todo</list-header>
+      <q-list
+        separator
+        bordered>
 
-      <task
+        <task
-        v-for="(task, key) in tasksTodo"
+          v-for="(task, key) in tasksTodo"
-        :key="key"
+          :key="key"
-        :task="task"
+          :task="task"
-        :id="key"
+          :id="key"
-      ></task>
+        ></task>
 
-    </q-list>
+      </q-list>
-  </div>
+    </div>
+  </transition>
 </template>
 
 <script>

src/pages/PageTodo.vue

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