mirrors/TiddlyWiki5
1
0
Fork 0
mirror of https://github.com/Jermolene/TiddlyWiki5 synced 2024-06-25 23:03:15 +00:00
Code Issues Releases Wiki Activity

Classic Storyview: Optimise for animation duration of zero (part 2)

Browse Source 
See fddc5d4ee
This commit is contained in:
Jeremy Ruston 2019-05-02 21:21:22 +01:00
parent fddc5d4ee6
commit 5ae14a16ec
1 changed files with 60 additions and 60 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

120
core/modules/storyviews/classic.js
View File

@ -41,36 +41,36 @@ ClassicStoryView.prototype.navigateTo = function(historyInfo) {
ClassicStoryView.prototype.insert = function(widget) { ClassicStoryView.prototype.insert = function(widget) {
var duration = $tw.utils.getAnimationDuration(); var duration = $tw.utils.getAnimationDuration();
if(duration) { if(duration) {
var targetElement = widget.findFirstDomNode(); var targetElement = widget.findFirstDomNode();
// Abandon if the list entry isn't a DOM element (it might be a text node) // Abandon if the list entry isn't a DOM element (it might be a text node)
if(!(targetElement instanceof Element)) { if(!(targetElement instanceof Element)) {
return; return;
} }
// Get the current height of the tiddler // Get the current height of the tiddler
var computedStyle = window.getComputedStyle(targetElement), var computedStyle = window.getComputedStyle(targetElement),
currMarginBottom = parseInt(computedStyle.marginBottom,10), currMarginBottom = parseInt(computedStyle.marginBottom,10),
currMarginTop = parseInt(computedStyle.marginTop,10), currMarginTop = parseInt(computedStyle.marginTop,10),
currHeight = targetElement.offsetHeight + currMarginTop; currHeight = targetElement.offsetHeight + currMarginTop;
// Reset the margin once the transition is over // Reset the margin once the transition is over
setTimeout(function() { setTimeout(function() {
$tw.utils.setStyle(targetElement,[
{transition: "none"},
{marginBottom: ""}
]);
},duration);
// Set up the initial position of the element
$tw.utils.setStyle(targetElement,[ $tw.utils.setStyle(targetElement,[
{transition: "none"}, {transition: "none"},
{marginBottom: ""} {marginBottom: (-currHeight) + "px"},
{opacity: "0.0"}
]); ]);
},duration); $tw.utils.forceLayout(targetElement);
// Set up the initial position of the element // Transition to the final position
$tw.utils.setStyle(targetElement,[ $tw.utils.setStyle(targetElement,[
{transition: "none"}, {transition: "opacity " + duration + "ms " + easing + ", " +
{marginBottom: (-currHeight) + "px"}, "margin-bottom " + duration + "ms " + easing},
{opacity: "0.0"} {marginBottom: currMarginBottom + "px"},
]); {opacity: "1.0"}
$tw.utils.forceLayout(targetElement);
// Transition to the final position
$tw.utils.setStyle(targetElement,[
{transition: "opacity " + duration + "ms " + easing + ", " +
"margin-bottom " + duration + "ms " + easing},
{marginBottom: currMarginBottom + "px"},
{opacity: "1.0"}
]); ]);
} }
}; };
@ -78,39 +78,39 @@ ClassicStoryView.prototype.insert = function(widget) {
ClassicStoryView.prototype.remove = function(widget) { ClassicStoryView.prototype.remove = function(widget) {
var duration = $tw.utils.getAnimationDuration(); var duration = $tw.utils.getAnimationDuration();
if(duration) { if(duration) {
var targetElement = widget.findFirstDomNode(), var targetElement = widget.findFirstDomNode(),
removeElement = function() { removeElement = function() {
widget.removeChildDomNodes(); widget.removeChildDomNodes();
}; };
// Abandon if the list entry isn't a DOM element (it might be a text node) // Abandon if the list entry isn't a DOM element (it might be a text node)
if(!(targetElement instanceof Element)) { if(!(targetElement instanceof Element)) {
removeElement(); removeElement();
return; return;
} }
// Get the current height of the tiddler // Get the current height of the tiddler
var currWidth = targetElement.offsetWidth, var currWidth = targetElement.offsetWidth,
computedStyle = window.getComputedStyle(targetElement), computedStyle = window.getComputedStyle(targetElement),
currMarginBottom = parseInt(computedStyle.marginBottom,10), currMarginBottom = parseInt(computedStyle.marginBottom,10),
currMarginTop = parseInt(computedStyle.marginTop,10), currMarginTop = parseInt(computedStyle.marginTop,10),
currHeight = targetElement.offsetHeight + currMarginTop; currHeight = targetElement.offsetHeight + currMarginTop;
// Remove the dom nodes of the widget at the end of the transition // Remove the dom nodes of the widget at the end of the transition
setTimeout(removeElement,duration); setTimeout(removeElement,duration);
// Animate the closure // Animate the closure
$tw.utils.setStyle(targetElement,[ $tw.utils.setStyle(targetElement,[
{transition: "none"}, {transition: "none"},
{transform: "translateX(0px)"}, {transform: "translateX(0px)"},
{marginBottom: currMarginBottom + "px"}, {marginBottom: currMarginBottom + "px"},
{opacity: "1.0"} {opacity: "1.0"}
]); ]);
$tw.utils.forceLayout(targetElement); $tw.utils.forceLayout(targetElement);
$tw.utils.setStyle(targetElement,[ $tw.utils.setStyle(targetElement,[
{transition: $tw.utils.roundTripPropertyName("transform") + " " + duration + "ms " + easing + ", " + {transition: $tw.utils.roundTripPropertyName("transform") + " " + duration + "ms " + easing + ", " +
"opacity " + duration + "ms " + easing + ", " + "opacity " + duration + "ms " + easing + ", " +
"margin-bottom " + duration + "ms " + easing}, "margin-bottom " + duration + "ms " + easing},
{transform: "translateX(-" + currWidth + "px)"}, {transform: "translateX(-" + currWidth + "px)"},
{marginBottom: (-currHeight) + "px"}, {marginBottom: (-currHeight) + "px"},
{opacity: "0.0"} {opacity: "0.0"}
]); ]);
} else { } else {
widget.removeChildDomNodes(); widget.removeChildDomNodes();
} }