1
0
mirror of https://github.com/Jermolene/TiddlyWiki5 synced 2024-11-19 08:14:50 +00:00

Fixes to the insertion classic listview animation

This commit is contained in:
Jeremy Ruston 2012-10-23 18:45:26 +01:00
parent e3f6a33157
commit c160c69187

View File

@ -23,14 +23,15 @@ ClassicListView.prototype.insert = function(index) {
var currHeight = targetElement.offsetHeight; var currHeight = targetElement.offsetHeight;
// Animate the closure // Animate the closure
var d = $tw.config.preferences.animationDuration + "ms"; var d = $tw.config.preferences.animationDuration + "ms";
targetElement.style[$tw.browser.transition] = "-" + $tw.browser.prefix.toLowerCase() + "-transform " + d + " ease-in-out, " + targetElement.style[$tw.browser.transition] = "";
"opacity " + d + " ease-out, " +
"height " + d + " ease-in-out";
targetElement.style[$tw.browser.transformorigin] = "0% 0%"; targetElement.style[$tw.browser.transformorigin] = "0% 0%";
targetElement.style[$tw.browser.transform] = "translateX(" + window.innerWidth + "px)"; targetElement.style[$tw.browser.transform] = "translateX(" + window.innerWidth + "px)";
targetElement.style.opacity = "0.0"; targetElement.style.opacity = "0.0";
targetElement.style.height = "0px"; targetElement.style.height = "0px";
$tw.utils.forceLayout(targetElement); $tw.utils.forceLayout(targetElement);
targetElement.style[$tw.browser.transition] = "-" + $tw.browser.prefix.toLowerCase() + "-transform " + d + " ease-in-out, " +
"opacity " + d + " ease-out, " +
"height " + d + " ease-in-out";
targetElement.style[$tw.browser.transform] = "translateX(0px)"; targetElement.style[$tw.browser.transform] = "translateX(0px)";
targetElement.style.opacity = "1.0"; targetElement.style.opacity = "1.0";
targetElement.style.height = currHeight + "px"; targetElement.style.height = currHeight + "px";
@ -61,7 +62,7 @@ ClassicListView.prototype.remove = function(index) {
wrapperElement.style.opacity = "1.0"; wrapperElement.style.opacity = "1.0";
wrapperElement.style.height = currHeight + "px"; wrapperElement.style.height = currHeight + "px";
$tw.utils.forceLayout(wrapperElement); $tw.utils.forceLayout(wrapperElement);
wrapperElement.style[$tw.browser.transform] = "translateX(" + window.innerWidth + "px)"; wrapperElement.style[$tw.browser.transform] = "translateX(-" + window.innerWidth + "px)";
wrapperElement.style.opacity = "0.0"; wrapperElement.style.opacity = "0.0";
wrapperElement.style.height = "0px"; wrapperElement.style.height = "0px";
// Returning true causes the DOM node not to be deleted // Returning true causes the DOM node not to be deleted