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 = {
FADE : 'fade',
HIDE : 'hide',
SHOW : 'show'
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)

11
scss/_toasts.scss
View File

@ -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;
}
}