Animations on the toast messages and remove on click.

src/lib/toast/Toast.svelte

@@ -1,12 +1,20 @@
 <script>
+	import { fly, fade } from 'svelte/transition';
+	import { flip } from 'svelte/animate';
 	import Portal from '../Portal.svelte';
 	import { toast } from './toast';
 </script>
 
 <Portal>
 	<div class="toast-wrapper">
-		{#each $toast as message}
-			<div class="toast">
+		{#each $toast as message (message)}
+			<div
+				on:click={toast.remove}
+				animate:flip
+				out:fade
+				in:fly={{ opacity: 0, x: 100 }}
+				class="toast"
+			>
 				<p>{message}</p>
 			</div>
 		{/each}

src/lib/toast/toast.js

@@ -6,10 +6,17 @@ const newToast = () => {
   function send(message) {
     update((state) => {
       return [...state, message];
-    })
+    });
   }
 
-  return { subscribe, send };
+  function remove() {
+    update((state) => {
+      let [first, ...rest] = state;
+      return [...rest];
+    });
+  }
+
+  return { subscribe, send, remove };
 }
 
 export const toast = newToast();

src/routes/index.svelte

@@ -27,7 +27,7 @@
 </Modal>
 
 <Toast />
-<button on:click={() => toast.send('New Message')}>New Toast</button>
+<button on:click={() => toast.send('New Message' + Math.random())}>New Toast</button>
 
 <!-- <button on:click={() => (isModalOpen = true)}>Open Modal Form</button> -->