mirrors/TiddlyWiki5
1
0
Fork 0
mirror of https://github.com/Jermolene/TiddlyWiki5 synced 2024-07-06 12:13:16 +00:00
Code Issues Releases Wiki Activity

Tweak the classic view navigation animation

Browse Source
This commit is contained in:
Jeremy Ruston 2012-10-28 09:30:45 +00:00
parent 1bfa4ca00e
commit d39ad8fff9
1 changed files with 15 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
core/modules/macros/list/listviews/classic.js
View File

@ -24,9 +24,10 @@ ClassicListView.prototype.navigateTo = function(historyInfo) {
$tw.utils.setStyle(targetElement,[ $tw.utils.setStyle(targetElement,[
{transition: "none"}, {transition: "none"},
{transformOrigin: "0% 0%"}, {transformOrigin: "0% 0%"},
{transform: "none"},
{height: "auto"} {height: "auto"}
]); ]);
// Get the current height of the elmeent
var currHeight = targetElement.offsetHeight;
// Compute the start and end positions of the target element // Compute the start and end positions of the target element
var srcRect = historyInfo.fromPageRect; var srcRect = historyInfo.fromPageRect;
if(!srcRect) { if(!srcRect) {
@ -44,17 +45,26 @@ $tw.utils.forceLayout(targetElement);
var dstRect = $tw.utils.getBoundingPageRect(targetElement); var dstRect = $tw.utils.getBoundingPageRect(targetElement);
// Compute the transformations // Compute the transformations
var scale = srcRect.width / dstRect.width; var scale = srcRect.width / dstRect.width;
// Reset the height once the transition is over
targetElement.addEventListener($tw.utils.convertEventName("transitionEnd"),function(event) {
$tw.utils.setStyle(targetElement,[
{transition: "none"},
{height: "auto"}
]);
},false);
// Position the target element over the source rectangle // Position the target element over the source rectangle
$tw.utils.setStyle(targetElement,[ $tw.utils.setStyle(targetElement,[
{transition: "none"}, {transform: "translateX(" + (srcRect.left-dstRect.left) + "px) translateY(" + (srcRect.top-dstRect.top) + "px) scale(" + scale + ")"},
{transform: "translateX(" + (srcRect.left-dstRect.left) + "px) translateY(" + (srcRect.top-dstRect.top) + "px) scale(" + scale + ")"} {height: "0px"}
]); ]);
$tw.utils.forceLayout(targetElement); $tw.utils.forceLayout(targetElement);
// Transition the target element to its final resting place // Transition the target element to its final resting place
$tw.utils.setStyle(targetElement,[ $tw.utils.setStyle(targetElement,[
{transition: $tw.utils.roundTripPropertyName("transform") + " " + $tw.config.preferences.animationDurationMs + " ease-in-out, " + {transition: $tw.utils.roundTripPropertyName("transform") + " " + $tw.config.preferences.animationDurationMs + " ease-in-out, " +
"opacity " + $tw.config.preferences.animationDurationMs + " ease-out"}, "opacity " + $tw.config.preferences.animationDurationMs + " ease-out, " +
{transform: "none"} "height " + $tw.config.preferences.animationDurationMs + " ease-in-out"},
{transform: "none"},
{height: currHeight + "px"}
]); ]);
// Scroll the target element into view // Scroll the target element into view
$tw.scroller.scrollIntoView(dstRect); $tw.scroller.scrollIntoView(dstRect);