mirrors/TiddlyWiki5
1
0
Fork 0
mirror of https://github.com/Jermolene/TiddlyWiki5 synced 2025-02-02 20:29:10 +00:00
Code Issues Releases Wiki Activity

Improved CSS animation technique

Browse Source 
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[$tw.browser.transform] = "translateX(0px)";
wrapperElement.style.opacity = "1.0"; wrapperElement.style.opacity = "1.0";
wrapperElement.style.height = currHeight + "px"; wrapperElement.style.height = currHeight + "px";
$tw.utils.nextTick(function() { wrapperElement.offsetWidth; // Force layout
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
return true; 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, " + wrapperElement.style[$tw.browser.transition] = "-" + $tw.browser.prefix.toLowerCase() + "-transform " + d + " ease-in-out, " +
"opacity " + d + " ease-out, " + "opacity " + d + " ease-out, " +
"width " + d + " ease-in-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 // Attach an event handler for th eend of the transition
wrapperElement.addEventListener($tw.browser.transitionEnd,function(event) { wrapperElement.addEventListener($tw.browser.transitionEnd,function(event) {
if(wrapperElement.parentNode) { if(wrapperElement.parentNode) {
wrapperElement.parentNode.removeChild(wrapperElement); wrapperElement.parentNode.removeChild(wrapperElement);
} }
},true); },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 // Returning true causes the DOM node not to be deleted
return true; 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, var self = this,
prevCurrentTiddler = this.currentTiddler; prevCurrentTiddler = this.currentTiddler;
this.currentTiddler = toStoryElement; this.currentTiddler = toStoryElement;
$tw.utils.nextTick(function() { // Force layout
// Transform the target tiddler to its natural size this.storyNode.offsetWidth;
toStoryElement.domNode.style[$tw.browser.transition] = "-" + $tw.browser.prefix.toLowerCase() + "-transform " + d + " ease-in-out, opacity " + d + " ease-out"; // Transform the target tiddler to its natural size
toStoryElement.domNode.style.opacity = "1.0"; toStoryElement.domNode.style[$tw.browser.transition] = "-" + $tw.browser.prefix.toLowerCase() + "-transform " + d + " ease-in-out, opacity " + d + " ease-out";
toStoryElement.domNode.style[$tw.browser.transform] = "translateX(0px) translateY(0px) scale(1)"; toStoryElement.domNode.style.opacity = "1.0";
toStoryElement.domNode.style.zIndex = "500"; toStoryElement.domNode.style[$tw.browser.transform] = "translateX(0px) translateY(0px) scale(1)";
// Transform the previous tiddler out of the way and then hide it toStoryElement.domNode.style.zIndex = "500";
if(prevCurrentTiddler && prevCurrentTiddler !== toStoryElement) { // Transform the previous tiddler out of the way and then hide it
var scale = titleBounds.width / sourceBounds.width; if(prevCurrentTiddler && prevCurrentTiddler !== toStoryElement) {
x = titleBounds.left - targetBounds.left - (sourceBounds.left - targetBounds.left) * scale; var scale = titleBounds.width / sourceBounds.width;
y = titleBounds.top - targetBounds.top - (sourceBounds.top - targetBounds.top) * scale; x = titleBounds.left - targetBounds.left - (sourceBounds.left - targetBounds.left) * scale;
prevCurrentTiddler.domNode.style[$tw.browser.transition] = "-" + $tw.browser.prefix.toLowerCase() + "-transform " + d + " ease-in-out, opacity " + d + " ease-out"; y = titleBounds.top - targetBounds.top - (sourceBounds.top - targetBounds.top) * scale;
prevCurrentTiddler.domNode.style.opacity = "0.0"; prevCurrentTiddler.domNode.style[$tw.browser.transition] = "-" + $tw.browser.prefix.toLowerCase() + "-transform " + d + " ease-in-out, opacity " + d + " ease-out";
prevCurrentTiddler.domNode.style[$tw.browser.transformorigin] = "0 0"; prevCurrentTiddler.domNode.style.opacity = "0.0";
prevCurrentTiddler.domNode.style[$tw.browser.transform] = "translateX(" + x + "px) translateY(" + y + "px) scale(" + scale + ")"; prevCurrentTiddler.domNode.style[$tw.browser.transformorigin] = "0 0";
prevCurrentTiddler.domNode.style.zIndex = "0"; prevCurrentTiddler.domNode.style[$tw.browser.transform] = "translateX(" + x + "px) translateY(" + y + "px) scale(" + scale + ")";
var eventHandler = function(event) { prevCurrentTiddler.domNode.style.zIndex = "0";
// Hide the DOM node when the transition is over var eventHandler = function(event) {
if(self.currentTiddler !== prevCurrentTiddler) { // Hide the DOM node when the transition is over
prevCurrentTiddler.domNode.style.display = "none"; if(self.currentTiddler !== prevCurrentTiddler) {
} prevCurrentTiddler.domNode.style.display = "none";
prevCurrentTiddler.domNode.removeEventListener($tw.browser.transitionEnd,eventHandler,true); }
}; prevCurrentTiddler.domNode.removeEventListener($tw.browser.transitionEnd,eventHandler,true);
prevCurrentTiddler.domNode.addEventListener($tw.browser.transitionEnd,eventHandler,true); };
} prevCurrentTiddler.domNode.addEventListener($tw.browser.transitionEnd,eventHandler,true);
// Scroll the target into view }
$tw.scroller.scrollIntoView(toStoryElement.domNode); // Scroll the target into view
}); $tw.scroller.scrollIntoView(toStoryElement.domNode);
}; };
/* /*
@ -154,27 +154,27 @@ Zoomin.prototype.remove = function(storyElement,storyElementIndex) {
this.currentTiddler = toStoryElement; this.currentTiddler = toStoryElement;
} }
// Animate them both // Animate them both
$tw.utils.nextTick(function() { // Force layout
// First, the tiddler we're closing this.storyNode.offsetWidth;
storyElement.domNode.style[$tw.browser.transition] = "-" + $tw.browser.prefix.toLowerCase() + "-transform " + d + " ease-in-out, opacity " + d + " ease-out"; // First, the tiddler we're closing
storyElement.domNode.style.opacity = "0.0"; storyElement.domNode.style[$tw.browser.transition] = "-" + $tw.browser.prefix.toLowerCase() + "-transform " + d + " ease-in-out, opacity " + d + " ease-out";
storyElement.domNode.style[$tw.browser.transformorigin] = "50% 50%"; storyElement.domNode.style.opacity = "0.0";
storyElement.domNode.style[$tw.browser.transform] = "translateX(0px) translateY(0px) scale(0.1)"; storyElement.domNode.style[$tw.browser.transformorigin] = "50% 50%";
storyElement.domNode.style.zIndex = "0"; storyElement.domNode.style[$tw.browser.transform] = "translateX(0px) translateY(0px) scale(0.1)";
var eventHandler = function(event) { storyElement.domNode.style.zIndex = "0";
// Delete the DOM node when the transition is over var eventHandler = function(event) {
if(storyElement.domNode.parentNode) { // Delete the DOM node when the transition is over
storyElement.domNode.parentNode.removeChild(storyElement.domNode); if(storyElement.domNode.parentNode) {
} storyElement.domNode.parentNode.removeChild(storyElement.domNode);
storyElement.domNode.removeEventListener($tw.browser.transitionEnd,eventHandler,true); }
}; storyElement.domNode.removeEventListener($tw.browser.transitionEnd,eventHandler,true);
storyElement.domNode.addEventListener($tw.browser.transitionEnd,eventHandler,true); };
// Now the tiddler we're going back to storyElement.domNode.addEventListener($tw.browser.transitionEnd,eventHandler,true);
if(toStoryElement) { // Now the tiddler we're going back to
toStoryElement.domNode.style[$tw.browser.transform] = "translateX(0px) translateY(0px) scale(1)"; if(toStoryElement) {
toStoryElement.domNode.style.opacity = "1.0"; 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 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"), modalFooter = document.createElement("div"),
modalFooterHelp = document.createElement("span"), modalFooterHelp = document.createElement("span"),
modalFooterButtons = 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 // Add classes
$tw.utils.addClass(modalBackdrop,"modal-backdrop"); $tw.utils.addClass(modalBackdrop,"modal-backdrop");
$tw.utils.addClass(modalWrapper,"modal"); $tw.utils.addClass(modalWrapper,"modal");
@ -86,24 +87,37 @@ Modal.prototype.display = function(title) {
}); });
// Add the close event handler // Add the close event handler
wrapper.addEventListener("tw-close",function(event) { 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(); event.stopPropagation();
return false; return false;
},false); },false);
// Set the initial styles for the message // Set the initial styles for the message
modalBackdrop.style.opacity = 0; modalBackdrop.style.opacity = 0;
modalWrapper.style[$tw.browser.transformorigin] = "0% 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 // Put the message into the document
document.body.appendChild(wrapper); document.body.appendChild(wrapper);
// Animate the styles // Set up animation for the styles
var d = $tw.config.preferences.animationDuration + "ms";
modalBackdrop.style[$tw.browser.transition] = "opacity " + d + " ease-out"; modalBackdrop.style[$tw.browser.transition] = "opacity " + d + " ease-out";
modalWrapper.style[$tw.browser.transition] = "-" + $tw.browser.prefix.toLowerCase() + "-transform " + d + " ease-in-out"; modalWrapper.style[$tw.browser.transition] = "-" + $tw.browser.prefix.toLowerCase() + "-transform " + d + " ease-in-out";
$tw.utils.nextTick(function() { // Force layout
modalBackdrop.style.opacity = 1; modalBackdrop.offsetWidth;
modalWrapper.style[$tw.browser.transform] = "translateY(0px)"; modalWrapper.offsetWidth;
}); // Set final animated styles
modalBackdrop.style.opacity = 1;
modalWrapper.style[$tw.browser.transform] = "translateY(0px)";
}; };
exports.Modal = Modal; exports.Modal = Modal;