From c3db15a1f82dd9d91ed664af7902f31fd4c4f0ff Mon Sep 17 00:00:00 2001
From: koehr <n@koehr.in>
Date: Tue, 30 Jun 2020 12:27:35 +0200
Subject: [PATCH] transitions for notifications

---
 src/assets/app.css               | 16 +++++++++++++---
 src/components/Notifications.vue |  4 ++--
 2 files changed, 15 insertions(+), 5 deletions(-)

diff --git a/src/assets/app.css b/src/assets/app.css
index 7d4a8bb..2233bd8 100644
--- a/src/assets/app.css
+++ b/src/assets/app.css
@@ -72,20 +72,21 @@ footer {
   display: block;
   margin-top: 1.5em;
 }
-section[name=notifications] {
+section.notification-section {
   display: block;
   max-width: 70rem;
   margin: 0 auto 1em;
 }
-section[name=notifications] > .note {
+section.notification-section > .note {
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 1em 1.5em;
   background-color: #0006;
   border: .5em solid #000;
+  transition: opacity .5s ease, transform .3s ease;
 }
-section[name=notifications] > .warning {
+section.notification-section > .warning {
   border-color: red;
 }
 
@@ -203,3 +204,12 @@ button.action-close {
   margin: auto inherit;
   text-align: center;
 }
+
+.notifications-enter-from, .notifications-leave-to {
+  opacity: 0;
+  transform: translate(0, -100px);
+}
+.notifications-leave-from, .notifications-enter-to {
+  opacity: 1;
+  transform: translate(0, 0);
+}
diff --git a/src/components/Notifications.vue b/src/components/Notifications.vue
index 906dba0..9a416c3 100644
--- a/src/components/Notifications.vue
+++ b/src/components/Notifications.vue
@@ -1,11 +1,11 @@
 <template>
-  <section name="notifications">
+  <transition-group name="notifications" tag="section" class="notification-section">
     <p class="note" :class="note.level" v-for="note in notDismissedNotes">
       <strong>{{ note.title }}</strong>
       <div v-html="note.content" />
       <button @click="$emit('dismiss', note)">dismiss</button>
     </p>
-  </section>
+  </transition-group>
 </template>
 
 <script lang="ts">