mirror of
https://github.com/Jermolene/TiddlyWiki5
synced 2024-11-27 12:07:19 +00:00
Animate modal message appearance
This commit is contained in:
parent
9c4ed18129
commit
41845ba059
@ -90,8 +90,20 @@ Modal.prototype.display = function(title) {
|
||||
event.stopPropagation();
|
||||
return false;
|
||||
},false);
|
||||
// Set the initial styles for the message
|
||||
modalBackdrop.style.opacity = 0;
|
||||
modalWrapper.style[$tw.browser.transformorigin] = "0% 0%";
|
||||
modalWrapper.style[$tw.browser.transform] = "translateY(-500px)";
|
||||
// Put the message into the document
|
||||
document.body.appendChild(wrapper);
|
||||
// Animate the styles
|
||||
var d = $tw.config.preferences.animationDuration + "ms";
|
||||
modalBackdrop.style[$tw.browser.transition] = "opacity " + d + " ease-out";
|
||||
modalWrapper.style[$tw.browser.transition] = "-" + $tw.browser.prefix.toLowerCase() + "-transform " + d + " ease-in-out";
|
||||
$tw.utils.nextTick(function() {
|
||||
modalBackdrop.style.opacity = 1;
|
||||
modalWrapper.style[$tw.browser.transform] = "translateY(0px)";
|
||||
});
|
||||
};
|
||||
|
||||
exports.Modal = Modal;
|
||||
|
Loading…
Reference in New Issue
Block a user