From b533785c4c391c6ada97c92a32a222963379a96f Mon Sep 17 00:00:00 2001 From: cagataycivici Date: Fri, 8 Feb 2019 16:44:30 +0300 Subject: [PATCH] Smooth animations for Toast --- public/themes/luna-amber/theme.css | 1 - public/themes/luna-blue/theme.css | 1 - public/themes/luna-green/theme.css | 1 - public/themes/luna-pink/theme.css | 1 - public/themes/nova-colored/theme.css | 1 - public/themes/nova-dark/theme.css | 1 - public/themes/nova-light/theme.css | 1 - public/themes/rhea/theme.css | 1 - src/components/toast/Toast.css | 15 ++++++++++----- src/views/toast/ToastDemo.vue | 2 +- 10 files changed, 11 insertions(+), 14 deletions(-) diff --git a/public/themes/luna-amber/theme.css b/public/themes/luna-amber/theme.css index 3c2cfc50a..b05066219 100644 --- a/public/themes/luna-amber/theme.css +++ b/public/themes/luna-amber/theme.css @@ -2944,7 +2944,6 @@ body .p-growl .p-growl-item-container.p-growl-message-error .p-growl-icon-close color: #212121; } body .p-toast { - top: 70px; opacity: 0.9; filter: alpha(opacity=90); } diff --git a/public/themes/luna-blue/theme.css b/public/themes/luna-blue/theme.css index be1ce35c8..2c3450516 100644 --- a/public/themes/luna-blue/theme.css +++ b/public/themes/luna-blue/theme.css @@ -2944,7 +2944,6 @@ body .p-growl .p-growl-item-container.p-growl-message-error .p-growl-icon-close color: #212121; } body .p-toast { - top: 70px; opacity: 0.9; filter: alpha(opacity=90); } diff --git a/public/themes/luna-green/theme.css b/public/themes/luna-green/theme.css index bd3197112..5fda655de 100644 --- a/public/themes/luna-green/theme.css +++ b/public/themes/luna-green/theme.css @@ -2944,7 +2944,6 @@ body .p-growl .p-growl-item-container.p-growl-message-error .p-growl-icon-close color: #212121; } body .p-toast { - top: 70px; opacity: 0.9; filter: alpha(opacity=90); } diff --git a/public/themes/luna-pink/theme.css b/public/themes/luna-pink/theme.css index b41662ce5..c0ca69671 100644 --- a/public/themes/luna-pink/theme.css +++ b/public/themes/luna-pink/theme.css @@ -2944,7 +2944,6 @@ body .p-growl .p-growl-item-container.p-growl-message-error .p-growl-icon-close color: #212121; } body .p-toast { - top: 70px; opacity: 0.9; filter: alpha(opacity=90); } diff --git a/public/themes/nova-colored/theme.css b/public/themes/nova-colored/theme.css index 091c003f6..44a9017e1 100644 --- a/public/themes/nova-colored/theme.css +++ b/public/themes/nova-colored/theme.css @@ -2944,7 +2944,6 @@ body .p-growl .p-growl-item-container.p-growl-message-error .p-growl-icon-close color: #212121; } body .p-toast { - top: 70px; opacity: 0.9; filter: alpha(opacity=90); } diff --git a/public/themes/nova-dark/theme.css b/public/themes/nova-dark/theme.css index 1712ed456..a63a1f4e7 100644 --- a/public/themes/nova-dark/theme.css +++ b/public/themes/nova-dark/theme.css @@ -2944,7 +2944,6 @@ body .p-growl .p-growl-item-container.p-growl-message-error .p-growl-icon-close color: #212121; } body .p-toast { - top: 70px; opacity: 0.9; filter: alpha(opacity=90); } diff --git a/public/themes/nova-light/theme.css b/public/themes/nova-light/theme.css index aed11c45c..fa8ae1cb6 100644 --- a/public/themes/nova-light/theme.css +++ b/public/themes/nova-light/theme.css @@ -2944,7 +2944,6 @@ body .p-growl .p-growl-item-container.p-growl-message-error .p-growl-icon-close color: #212121; } body .p-toast { - top: 70px; opacity: 0.9; filter: alpha(opacity=90); } diff --git a/public/themes/rhea/theme.css b/public/themes/rhea/theme.css index b663143b6..938b4a001 100644 --- a/public/themes/rhea/theme.css +++ b/public/themes/rhea/theme.css @@ -2944,7 +2944,6 @@ body .p-growl .p-growl-item-container.p-growl-message-error .p-growl-icon-close color: #212121; } body .p-toast { - top: 120px; opacity: 0.9; filter: alpha(opacity=90); } diff --git a/src/components/toast/Toast.css b/src/components/toast/Toast.css index dffc92ebc..9278fba32 100644 --- a/src/components/toast/Toast.css +++ b/src/components/toast/Toast.css @@ -24,8 +24,8 @@ } .p-toast-item-container { - position:relative; - margin:0 0 10px 0; + position: relative; + margin-bottom: 1em; } .p-toast-item { @@ -86,11 +86,16 @@ .p-toast-message-leave-to { max-height: 0; opacity: 0; + margin-bottom: 0; overflow: hidden; } -.p-toast-message-enter-active, +.p-toast-message-enter-active { + -webkit-transition: transform .3s, opacity .3s; + transition: transform .3s, opacity .3s; +} + .p-toast-message-leave-active { - -webkit-transition: all .3s; - transition: all .3s; + -webkit-transition: max-height .45s cubic-bezier(0, 1, 0, 1), opacity .3s, margin-bottom .3s; + transition: max-height .45s cubic-bezier(0, 1, 0, 1), opacity .3s, margin-bottom .3s; } \ No newline at end of file diff --git a/src/views/toast/ToastDemo.vue b/src/views/toast/ToastDemo.vue index 878be9a2c..534b99a15 100644 --- a/src/views/toast/ToastDemo.vue +++ b/src/views/toast/ToastDemo.vue @@ -103,7 +103,7 @@ button.p-button { } .p-toast.p-toast-topright, -.p-toast.p-toast-left { +.p-toast.p-toast-topleft { top: 100px; }