fix fade animation for toast

diff --git a/js/src/toast.js b/js/src/toast.js
index 23d482d35fa3b3164de4f767aad86a4dedd8067d..471d11aebeea8fc33491bf193b9a13b3b75fa448 100644 (file)
--- a/js/src/toast.js
+++ b/js/src/toast.js
@@ -29,9 +29,10 @@ const Event = {
 }
 
 const ClassName = {
-  FADE : 'fade',
-  HIDE : 'hide',
-  SHOW : 'show'
+  FADE    : 'fade',
+  HIDE    : 'hide',
+  SHOW    : 'show',
+  SHOWING : 'showing'
 }
 
 const DefaultType = {
@@ -84,6 +85,9 @@ class Toast {
     }
 
     const complete = () => {
+      this._element.classList.remove(ClassName.SHOWING)
+      this._element.classList.add(ClassName.SHOW)
+
       $(this._element).trigger(Event.SHOWN)
 
       if (this._config.autohide) {
@@ -91,7 +95,8 @@ class Toast {
       }
     }
 
-    this._element.classList.add(ClassName.SHOW)
+    this._element.classList.remove(ClassName.HIDE)
+    this._element.classList.add(ClassName.SHOWING)
     if (this._config.animation) {
       const transitionDuration = Util.getTransitionDurationFromElement(this._element)
 
@@ -162,11 +167,11 @@ class Toast {
 
   _close() {
     const complete = () => {
+      this._element.classList.add(ClassName.HIDE)
       $(this._element).trigger(Event.HIDDEN)
     }
 
     this._element.classList.remove(ClassName.SHOW)
-
     if (this._config.animation) {
       const transitionDuration = Util.getTransitionDurationFromElement(this._element)
 

diff --git a/scss/_toasts.scss b/scss/_toasts.scss
index d6ba4ca1413dcf80638da862b0a8f3a67d97cacf..c5fde797b9cb324fb73771f3aa89b2156503ae13 100644 (file)
--- a/scss/_toasts.scss
+++ b/scss/_toasts.scss
@@ -1,5 +1,4 @@
 .toast {
-  display: none;
   max-width: $toast-max-width;
   overflow: hidden; // cheap rounded corners on nested items
   font-size: $toast-font-size; // knock it down to 14px
@@ -9,13 +8,23 @@
   border-radius: $toast-border-radius;
   box-shadow: $toast-box-shadow;
   backdrop-filter: blur(10px);
+  opacity: 0;
 
   + .toast {
     margin-top: $toast-padding-x;
   }
 
+  &.showing {
+    opacity: 1;
+  }
+
   &.show {
     display: block;
+    opacity: 1;
+  }
+
+  &.hide {
+    display: none;
   }
 }