mirrors
/
TiddlyWiki5
mirror of https://github.com/Jermolene/TiddlyWiki5
1
0
Fork 0
Code Issues Releases Wiki Activity

Improved CSS animation technique 

Clearer and more concise now that we're forcing layout rather than
using nextTick()
This commit is contained in:
Jeremy Ruston 2012-07-18 11:45:17 +01:00
parent 01b5f09c63
commit ec77acd6f7
4 changed files with 81 additions and 68 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
core/modules/macros/story/views/classic.js
View File

@ -39,11 +39,10 @@ ClassicScroller.prototype.remove = function(storyElementNode) {
wrapperElement.style[$tw.browser.transform] = "translateX(0px)";
wrapperElement.style.opacity = "1.0";
wrapperElement.style.height = currHeight + "px";
$tw.utils.nextTick(function() {
wrapperElement.style[$tw.browser.transform] = "translateX(" + window.innerWidth + "px)";
wrapperElement.style.opacity = "0.0";
wrapperElement.style.height = "0px";
});
wrapperElement.offsetWidth; // Force layout
wrapperElement.style[$tw.browser.transform] = "translateX(" + window.innerWidth + "px)";
wrapperElement.style.opacity = "0.0";
wrapperElement.style.height = "0px";
// Returning true causes the DOM node not to be deleted
return true;
};

10
core/modules/macros/story/views/sideways.js
View File

@ -67,17 +67,17 @@ SidewaysView.prototype.remove = function(storyElementNode) {
wrapperElement.style[$tw.browser.transition] = "-" + $tw.browser.prefix.toLowerCase() + "-transform " + d + " ease-in-out, " +
"opacity " + d + " ease-out, " +
"width " + d + " ease-in-out";
$tw.utils.nextTick(function() {
wrapperElement.style[$tw.browser.transform] = "translateY(" + window.innerHeight + "px)";
wrapperElement.style.opacity = "0.0";
wrapperElement.style.width = "0px";
});
// Attach an event handler for th eend of the transition
wrapperElement.addEventListener($tw.browser.transitionEnd,function(event) {
if(wrapperElement.parentNode) {
wrapperElement.parentNode.removeChild(wrapperElement);
}
},true);
// Animate
wrapperElement.offsetWidth; // Force layout
wrapperElement.style[$tw.browser.transform] = "translateY(" + window.innerHeight + "px)";
wrapperElement.style.opacity = "0.0";
wrapperElement.style.width = "0px";
// Returning true causes the DOM node not to be deleted
return true;
};

98
core/modules/macros/story/views/zoomin.js
View File

@ -93,34 +93,34 @@ Zoomin.prototype.navigateForward = function(toStoryElement,fromStoryElement,hist
var self = this,
prevCurrentTiddler = this.currentTiddler;
this.currentTiddler = toStoryElement;
$tw.utils.nextTick(function() {
// Transform the target tiddler to its natural size
toStoryElement.domNode.style[$tw.browser.transition] = "-" + $tw.browser.prefix.toLowerCase() + "-transform " + d + " ease-in-out, opacity " + d + " ease-out";
toStoryElement.domNode.style.opacity = "1.0";
toStoryElement.domNode.style[$tw.browser.transform] = "translateX(0px) translateY(0px) scale(1)";
toStoryElement.domNode.style.zIndex = "500";
// Transform the previous tiddler out of the way and then hide it
if(prevCurrentTiddler && prevCurrentTiddler !== toStoryElement) {
var scale = titleBounds.width / sourceBounds.width;
x = titleBounds.left - targetBounds.left - (sourceBounds.left - targetBounds.left) * scale;
y = titleBounds.top - targetBounds.top - (sourceBounds.top - targetBounds.top) * scale;
prevCurrentTiddler.domNode.style[$tw.browser.transition] = "-" + $tw.browser.prefix.toLowerCase() + "-transform " + d + " ease-in-out, opacity " + d + " ease-out";
prevCurrentTiddler.domNode.style.opacity = "0.0";
prevCurrentTiddler.domNode.style[$tw.browser.transformorigin] = "0 0";
prevCurrentTiddler.domNode.style[$tw.browser.transform] = "translateX(" + x + "px) translateY(" + y + "px) scale(" + scale + ")";
prevCurrentTiddler.domNode.style.zIndex = "0";
var eventHandler = function(event) {
// Hide the DOM node when the transition is over
if(self.currentTiddler !== prevCurrentTiddler) {
prevCurrentTiddler.domNode.style.display = "none";
}
prevCurrentTiddler.domNode.removeEventListener($tw.browser.transitionEnd,eventHandler,true);
};
prevCurrentTiddler.domNode.addEventListener($tw.browser.transitionEnd,eventHandler,true);
}
// Scroll the target into view
$tw.scroller.scrollIntoView(toStoryElement.domNode);
});
// Force layout
this.storyNode.offsetWidth;
// Transform the target tiddler to its natural size
toStoryElement.domNode.style[$tw.browser.transition] = "-" + $tw.browser.prefix.toLowerCase() + "-transform " + d + " ease-in-out, opacity " + d + " ease-out";
toStoryElement.domNode.style.opacity = "1.0";
toStoryElement.domNode.style[$tw.browser.transform] = "translateX(0px) translateY(0px) scale(1)";
toStoryElement.domNode.style.zIndex = "500";
// Transform the previous tiddler out of the way and then hide it
if(prevCurrentTiddler && prevCurrentTiddler !== toStoryElement) {
var scale = titleBounds.width / sourceBounds.width;
x = titleBounds.left - targetBounds.left - (sourceBounds.left - targetBounds.left) * scale;
y = titleBounds.top - targetBounds.top - (sourceBounds.top - targetBounds.top) * scale;
prevCurrentTiddler.domNode.style[$tw.browser.transition] = "-" + $tw.browser.prefix.toLowerCase() + "-transform " + d + " ease-in-out, opacity " + d + " ease-out";
prevCurrentTiddler.domNode.style.opacity = "0.0";
prevCurrentTiddler.domNode.style[$tw.browser.transformorigin] = "0 0";
prevCurrentTiddler.domNode.style[$tw.browser.transform] = "translateX(" + x + "px) translateY(" + y + "px) scale(" + scale + ")";
prevCurrentTiddler.domNode.style.zIndex = "0";
var eventHandler = function(event) {
// Hide the DOM node when the transition is over
if(self.currentTiddler !== prevCurrentTiddler) {
prevCurrentTiddler.domNode.style.display = "none";
}
prevCurrentTiddler.domNode.removeEventListener($tw.browser.transitionEnd,eventHandler,true);
};
prevCurrentTiddler.domNode.addEventListener($tw.browser.transitionEnd,eventHandler,true);
}
// Scroll the target into view
$tw.scroller.scrollIntoView(toStoryElement.domNode);
};
/*
@ -154,27 +154,27 @@ Zoomin.prototype.remove = function(storyElement,storyElementIndex) {
this.currentTiddler = toStoryElement;
}
// Animate them both
$tw.utils.nextTick(function() {
// First, the tiddler we're closing
storyElement.domNode.style[$tw.browser.transition] = "-" + $tw.browser.prefix.toLowerCase() + "-transform " + d + " ease-in-out, opacity " + d + " ease-out";
storyElement.domNode.style.opacity = "0.0";
storyElement.domNode.style[$tw.browser.transformorigin] = "50% 50%";
storyElement.domNode.style[$tw.browser.transform] = "translateX(0px) translateY(0px) scale(0.1)";
storyElement.domNode.style.zIndex = "0";
var eventHandler = function(event) {
// Delete the DOM node when the transition is over
if(storyElement.domNode.parentNode) {
storyElement.domNode.parentNode.removeChild(storyElement.domNode);
}
storyElement.domNode.removeEventListener($tw.browser.transitionEnd,eventHandler,true);
};
storyElement.domNode.addEventListener($tw.browser.transitionEnd,eventHandler,true);
// Now the tiddler we're going back to
if(toStoryElement) {
toStoryElement.domNode.style[$tw.browser.transform] = "translateX(0px) translateY(0px) scale(1)";
toStoryElement.domNode.style.opacity = "1.0";
}
});
// Force layout
this.storyNode.offsetWidth;
// First, the tiddler we're closing
storyElement.domNode.style[$tw.browser.transition] = "-" + $tw.browser.prefix.toLowerCase() + "-transform " + d + " ease-in-out, opacity " + d + " ease-out";
storyElement.domNode.style.opacity = "0.0";
storyElement.domNode.style[$tw.browser.transformorigin] = "50% 50%";
storyElement.domNode.style[$tw.browser.transform] = "translateX(0px) translateY(0px) scale(0.1)";
storyElement.domNode.style.zIndex = "0";
var eventHandler = function(event) {
// Delete the DOM node when the transition is over
if(storyElement.domNode.parentNode) {
storyElement.domNode.parentNode.removeChild(storyElement.domNode);
}
storyElement.domNode.removeEventListener($tw.browser.transitionEnd,eventHandler,true);
};
storyElement.domNode.addEventListener($tw.browser.transitionEnd,eventHandler,true);
// Now the tiddler we're going back to
if(toStoryElement) {
toStoryElement.domNode.style[$tw.browser.transform] = "translateX(0px) translateY(0px) scale(1)";
toStoryElement.domNode.style.opacity = "1.0";
}
return true; // Indicate that we'll delete the DOM node
};

32
core/modules/utils/dom/modal.js
View File

@ -27,7 +27,8 @@ Modal.prototype.display = function(title) {
modalFooter = document.createElement("div"),
modalFooterHelp = document.createElement("span"),
modalFooterButtons = document.createElement("span"),
tiddler = this.wiki.getTiddler(title);
tiddler = this.wiki.getTiddler(title),
d = $tw.config.preferences.animationDuration + "ms";
// Add classes
$tw.utils.addClass(modalBackdrop,"modal-backdrop");
$tw.utils.addClass(modalWrapper,"modal");
@ -86,24 +87,37 @@ Modal.prototype.display = function(title) {
});
// Add the close event handler
wrapper.addEventListener("tw-close",function(event) {
document.body.removeChild(wrapper);
// Force layout and animate the modal message away
modalBackdrop.offsetWidth;
modalWrapper.offsetWidth;
modalBackdrop.style.opacity = 0;
modalWrapper.style[$tw.browser.transform] = "translateY(" + window.innerHeight + "px)";
// Set up an event for the transition end
modalWrapper.addEventListener($tw.browser.transitionEnd,function(event) {
if(wrapper.parentNode) {
// Remove the modal message from the DOM
document.body.removeChild(wrapper);
}
},false);
// Don't let anyone else handle the tw-close message
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)";
modalWrapper.style[$tw.browser.transform] = "translateY(" + (-window.innerHeight) + "px)";
// Put the message into the document
document.body.appendChild(wrapper);
// Animate the styles
var d = $tw.config.preferences.animationDuration + "ms";
// Set up animation for the styles
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)";
});
// Force layout
modalBackdrop.offsetWidth;
modalWrapper.offsetWidth;
// Set final animated styles
modalBackdrop.style.opacity = 1;
modalWrapper.style[$tw.browser.transform] = "translateY(0px)";
};
exports.Modal = Modal;