From 3f8d57eadb0dd161a064f3b834b60f3743857870 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Keviin=20=C3=85berg=20Kultalahti?= <kevin.aberg@gmail.com>
Date: Fri, 22 Jan 2021 13:05:52 +0100
Subject: [PATCH] adds smooth removal of notifications using animate:flip

---
 .../components/common/Notification/NotificationDisplay.svelte   | 2 ++
 packages/client/src/components/NotificationDisplay.svelte       | 2 ++
 2 files changed, 4 insertions(+)

diff --git a/packages/builder/src/components/common/Notification/NotificationDisplay.svelte b/packages/builder/src/components/common/Notification/NotificationDisplay.svelte
index 657bc3bcd..3a7c03a71 100644
--- a/packages/builder/src/components/common/Notification/NotificationDisplay.svelte
+++ b/packages/builder/src/components/common/Notification/NotificationDisplay.svelte
@@ -1,5 +1,6 @@
 <script>
   import { notificationStore } from "builderStore/store/notifications"
+  import { flip } from 'svelte/animate';
   import { fly } from "svelte/transition"
 
   export let themes = {
@@ -26,6 +27,7 @@
 <div class="notifications">
   {#each $notificationStore.notifications as notification (notification.id)}
     <div
+      animate:flip
       class="toast"
       style="background: {themes[notification.type]};"
       transition:fly={{ y: -30 }}>
diff --git a/packages/client/src/components/NotificationDisplay.svelte b/packages/client/src/components/NotificationDisplay.svelte
index 3206c60ec..8b6fca805 100644
--- a/packages/client/src/components/NotificationDisplay.svelte
+++ b/packages/client/src/components/NotificationDisplay.svelte
@@ -1,4 +1,5 @@
 <script>
+    import { flip } from 'svelte/animate';
     import { fly } from "svelte/transition"
     import { getContext } from "svelte"
     const notifications = getContext("notifications")
@@ -15,6 +16,7 @@
   <div class="notifications">
     {#each $notifications as notification (notification.id)}
       <div
+        animate:flip
         class="toast"
         style="background: {themes[notification.type]};"
         transition:fly={{ y: -30 }}>