Smooth animations for messages

src/components/message/Message.css

@@ -34,22 +34,25 @@
     opacity: 0;
 }
 
-.p-messages.p-messages-leave-to {
-    max-height: 0;
-    opacity: 0;
+.p-messages-enter-active {
+    -webkit-transition: opacity .3s;
+    transition: opacity .3s;
 }
 
 .p-messages.p-messages-leave {
     max-height: 1000px;
 }
 
-.p-messages-enter-active {
-    transition: opacity 1s;
+.p-messages.p-messages-leave-to {
+    max-height: 0;
+    opacity: 0;
+    margin: 0 !important;
 }
 
 .p-messages-leave-active {
     overflow: hidden;
-    transition: max-height .45s cubic-bezier(0, 1, 0, 1), opacity .3s, margin .45s;
+    -webkit-transition: max-height .3s cubic-bezier(0, 1, 0, 1), opacity .3s, margin .3s;
+    transition: max-height .3 cubic-bezier(0, 1, 0, 1), opacity .3s, margin .3s;
 }
 
 .p-messages-leave-active .p-messages-close {

src/components/toast/Toast.css

@@ -25,7 +25,6 @@
 
 .p-toast-item-container {
     position: relative;
-    margin-bottom: 1em;
 }
 
 .p-toast-item {
@@ -83,7 +82,7 @@
     max-height: 1000px;
 }
 
-.p-toast-message-leave-to {
+.p-toast .p-toast-item-container.p-toast-message-leave-to {
     max-height: 0;
     opacity: 0;
     margin-bottom: 0;