rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-01-17 09:52:29 +01:00
Code Issues Actions Packages Releases Activity

fix fade animation for toast

Browse Source
This commit is contained in:
Johann-S 2018-12-06 13:53:01 +01:00
parent fc15c4c4ce
commit 1f4d7903db
2 changed files with 20 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
js/src/toast.js
View File

@ -31,7 +31,8 @@ const Event = {
const ClassName = { const ClassName = {
FADE : 'fade', FADE : 'fade',
HIDE : 'hide', HIDE : 'hide',
SHOW : 'show' SHOW : 'show',
SHOWING : 'showing'
} }
const DefaultType = { const DefaultType = {
@ -84,6 +85,9 @@ class Toast {
} }
const complete = () => { const complete = () => {
this._element.classList.remove(ClassName.SHOWING)
this._element.classList.add(ClassName.SHOW)
$(this._element).trigger(Event.SHOWN) $(this._element).trigger(Event.SHOWN)
if (this._config.autohide) { 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) { if (this._config.animation) {
const transitionDuration = Util.getTransitionDurationFromElement(this._element) const transitionDuration = Util.getTransitionDurationFromElement(this._element)
@ -162,11 +167,11 @@ class Toast {
_close() { _close() {
const complete = () => { const complete = () => {
this._element.classList.add(ClassName.HIDE)
$(this._element).trigger(Event.HIDDEN) $(this._element).trigger(Event.HIDDEN)
} }
this._element.classList.remove(ClassName.SHOW) this._element.classList.remove(ClassName.SHOW)
if (this._config.animation) { if (this._config.animation) {
const transitionDuration = Util.getTransitionDurationFromElement(this._element) const transitionDuration = Util.getTransitionDurationFromElement(this._element)

11
scss/_toasts.scss
View File

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