62

Author: kossiecoder

db.json

@@ -104,7 +104,7 @@
     {
       "subject": "ab",
       "completed": false,
-      "body": "",
+      "body": "ffffffdfdfasfff",
       "id": 28
     }
   ]

src/components/TodoForm.vue

@@ -60,11 +60,13 @@
       Cancel
     </button>
   </form>
-  <Toast 
-    v-if="showToast" 
-    :message="toastMessage"
-    :type="toastAlertType"
-  />
+  <transition name="fade">
+    <Toast 
+      v-if="showToast" 
+      :message="toastMessage"
+      :type="toastAlertType"
+    />
+  </transition>
 </template>
 
 <script>
@@ -196,4 +198,21 @@ export default {
   .text-red {
     color: red;
   }
+
+  .fade-enter-active,
+  .fade-leave-active {
+    transition: all 0.5s ease;
+  }
+
+  .fade-enter-from,
+  .fade-leave-to {
+    opacity: 0;
+    transform: translateY(-30px);
+  }
+
+  .fade-enter-to,
+  .fade-leave-from {
+    opacity: 1;
+    transform: translateY(0px);
+  }
 </style>