1
0
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:
Jeremy Ruston 2012-07-17 18:28:47 +01:00
parent 9c4ed18129
commit 41845ba059

View File

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