Refactored notification transition

simplystack · Apr 3, 2019 · 3527985 · 3527985
1 parent 97a5020
commit 3527985
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 78 deletions.
diff --git a/src/components/Notification/main.vue b/src/components/Notification/main.vue
@@ -1,6 +1,5 @@
 <template>
-  <transition name="move-notification">
-    <div class="notification" :class="classes">
+  <div class="notification" :class="classes">
       <div class="notification__icon">
         <svg v-if="type === 'warning'" xmlns="http://www.w3.org/2000/svg" width="20" height="16" viewBox="0 0 20 16">
           <g fill="none" fill-rule="evenodd" transform="translate(-1 -1)">
@@ -52,7 +51,6 @@
         </v-button>
       </div>
     </div>
-  </transition>
 </template>
 
 <script>

diff --git a/src/components/NotificationContainer/main.vue b/src/components/NotificationContainer/main.vue
@@ -1,18 +1,20 @@
 <template>
   <div class="notification-container" :class="classes">
-    <v-notification
-      :id="`notification-${index}`"
-      :key="item.timestamp.getTime()"
-      :type="item.type"
-      :title="item.title"
-      :message="item.message"
-      :actions="item.actions"
-      :timestamp="item.timestamp"
+    <transition-group name="list">
+      <v-notification
+        :id="`notification-${index}`"
+        :key="item.timestamp.getTime()"
+        :type="item.type"
+        :title="item.title"
+        :message="item.message"
+        :actions="item.actions"
+        :timestamp="item.timestamp"
 
-      @close="remove(item.timestamp)"
+        @close="remove(item.timestamp)"
 
-      v-for="(item, index) in queue"
-    ></v-notification>
+        v-for="(item, index) in queue"
+      ></v-notification>
+    </transition-group>
   </div>
 </template>
 
@@ -61,71 +63,11 @@ export default {
 </script>
 
 <style>
-  .move-notification-appear, .move-notification-enter-active {
-    animation-duration: .3s;
-    animation-fill-mode: both;
-    animation-play-state: paused
+  .list-enter-active, .list-leave-active {
+    transition: all .3s;
   }
-
-  .move-notification-leave-active {
-    animation-duration: .3s;
-    animation-fill-mode: both;
-    animation-play-state: paused
-  }
-
-  .move-notification-appear, .move-notification-enter-active {
-    animation-name: moveNoticeIn;
-    animation-play-state: running
-  }
-
-  .move-notification-leave-active {
-    animation-name: moveNoticeOut;
-    animation-play-state: running
-  }
-
-  .move-notification-appear, .move-notification-enter-active {
+  .list-enter, .list-leave-to {
     opacity: 0;
-    animation-timing-function: ease-in-out
-  }
-
-  .move-notification-leave-active {
-    animation-timing-function: ease-in-out
-  }
-
-  @keyframes moveNoticeIn {
-    0% {
-      opacity: 0;
-      transform-origin: 0 0;
-      transform: translateX(100%)
-    }
-    100% {
-      opacity: 1;
-      transform-origin: 0 0;
-      transform: translateX(0)
-    }
-  }
-
-  @keyframes moveNoticeOut {
-    0% {
-      transform-origin: 0 0;
-      transform: translateX(0);
-      opacity: 1
-    }
-    70% {
-      transform-origin: 0 0;
-      transform: translateX(100%);
-      height: auto;
-      padding: 16px;
-      margin-bottom: 10px;
-      opacity: 0
-    }
-    100% {
-      transform-origin: 0 0;
-      transform: translateX(100%);
-      height: 0;
-      padding: 0;
-      margin-bottom: 0;
-      opacity: 0
-    }
+    transform: translateX(30px);
   }
 </style>