diff options
| -rw-r--r-- | js/src/toast.js | 15 | ||||
| -rw-r--r-- | scss/_toasts.scss | 11 |
2 files changed, 20 insertions, 6 deletions
diff --git a/js/src/toast.js b/js/src/toast.js index 23d482d35f..471d11aebe 100644 --- 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 d6ba4ca141..c5fde797b9 100644 --- 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; } } |