Skip to content

Remove css props rather than setting transition to none #9284

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 4 commits into
base: master
Choose a base branch
from
Open

Remove css props rather than setting transition to none #9284

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
248eb1e
Use style property deletion rather than setting to none
CrossEye Sep 8, 2025
cff5fa0
Remove cecily and slide, fix quotation marks
CrossEye Sep 8, 2025
5598469
Fix returning typo
CrossEye Sep 8, 2025
e40207a
Add helper functions, use some timeouts to order events
CrossEye Sep 8, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 5 additions & 7 deletions core/modules/storyviews/classic.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,24 +47,24 @@ ClassicStoryView.prototype.insert = function(widget) {
// Reset the margin once the transition is over
setTimeout(function() {
$tw.utils.setStyle(targetElement,[
{transition: "none"},
{marginBottom: ""}
]);
$tw.utils.removeStyle(targetElement, "transition");
},duration);
// Set up the initial position of the element
$tw.utils.setStyle(targetElement,[
{transition: "none"},
{marginBottom: (-currHeight) + "px"},
{opacity: "0.0"}
]);
$tw.utils.removeStyle(targetElement, "transition");
$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"}
]);
]);
}
};

Expand Down Expand Up @@ -94,11 +94,9 @@ ClassicStoryView.prototype.remove = function(widget) {
setTimeout(removeElement,duration);
// Animate the closure
$tw.utils.setStyle(targetElement,[
{transition: "none"},
{transform: "translateX(0px)"},
{marginBottom: currMarginBottom + "px"},
{opacity: "1.0"}
]);
$tw.utils.removeStyles(targetElement, ["transition", "transform", "opacity"]);
$tw.utils.forceLayout(targetElement);
$tw.utils.setStyle(targetElement,[
{transition: $tw.utils.roundTripPropertyName("transform") + " " + duration + "ms " + easing + ", " +
Expand All @@ -113,4 +111,4 @@ ClassicStoryView.prototype.remove = function(widget) {
}
};

exports.classic = ClassicStoryView;
exports.classic = ClassicStoryView;
18 changes: 7 additions & 11 deletions core/modules/storyviews/pop.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,10 +37,7 @@ PopStoryView.prototype.insert = function(widget) {
}
// Reset once the transition is over
setTimeout(function() {
$tw.utils.setStyle(targetElement,[
{transition: "none"},
{transform: "none"}
]);
$tw.utils.removeStyles(targetElement, ["transition", "transform"]);
$tw.utils.setStyle(widget.document.body,[
{"overflow-x": ""}
]);
Expand All @@ -51,10 +48,10 @@ PopStoryView.prototype.insert = function(widget) {
]);
// Set up the initial position of the element
$tw.utils.setStyle(targetElement,[
{transition: "none"},
{transform: "scale(2)"},
{opacity: "0.0"}
]);
$tw.utils.removeStyle(targetElement, "transition");
$tw.utils.forceLayout(targetElement);
// Transition to the final position
$tw.utils.setStyle(targetElement,[
Expand All @@ -63,6 +60,9 @@ PopStoryView.prototype.insert = function(widget) {
{transform: "scale(1)"},
{opacity: "1.0"}
]);
setTimeout(function() {
$tw.utils.removeStyles(targetElement, ["transition", "transform", "opactity"]);
}, duration)
};

PopStoryView.prototype.remove = function(widget) {
Expand All @@ -81,11 +81,7 @@ PopStoryView.prototype.remove = function(widget) {
// Remove the element at the end of the transition
setTimeout(removeElement,duration);
// Animate the closure
$tw.utils.setStyle(targetElement,[
{transition: "none"},
{transform: "scale(1)"},
{opacity: "1.0"}
]);
$tw.utils.removeStyles(targetElement, ["transition", "transform", "opacity"]);
$tw.utils.forceLayout(targetElement);
$tw.utils.setStyle(targetElement,[
{transition: $tw.utils.roundTripPropertyName("transform") + " " + duration + "ms ease-in-out, " +
Expand All @@ -95,4 +91,4 @@ PopStoryView.prototype.remove = function(widget) {
]);
};

exports.pop = PopStoryView;
exports.pop = PopStoryView;
8 changes: 7 additions & 1 deletion core/modules/storyviews/zoomin.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -96,6 +96,9 @@ ZoominListView.prototype.navigateTo = function(historyInfo) {
{transform: "translateX(0px) translateY(0px) scale(1)"},
{zIndex: "500"},
]);
setTimeout(function() {
$tw.utils.removeStyles(targetElement, ["transition", "opacity", "transform", "zIndex"]);
}, duration);
// Transform the previous tiddler out of the way and then hide it
if(prevCurrentTiddler && prevCurrentTiddler !== targetElement) {
scale = zoomBounds.width / sourceBounds.width;
Expand Down Expand Up @@ -207,6 +210,9 @@ ZoominListView.prototype.remove = function(widget) {
{opacity: "0"},
{zIndex: "0"}
]);
setTimeout(function() {
$tw.utils.removeStyles(toWidgetDomNode, ["transformOrigin", "transform", "transition", "opacity", "zIndex"]);
}, duration);
setTimeout(removeElement,duration);
// Now the tiddler we're going back to
if(toWidgetDomNode) {
Expand All @@ -222,4 +228,4 @@ ZoominListView.prototype.logTextNodeRoot = function(node) {
this.textNodeLogger.log($tw.language.getString("Error/ZoominTextNode") + " " + node.textContent);
};

exports.zoomin = ZoominListView;
exports.zoomin = ZoominListView;
20 changes: 20 additions & 0 deletions core/modules/utils/dom/browser.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,26 @@ exports.setStyle = function(element,styles) {
}
};

/*
Remove style properties of an element
element: dom node
styleProperties: ordered array of string property names
*/
exports.removeStyles = function(element, styleProperties) {
for (var i=0; i<styleProperties.length; i++) {
element.style.removeProperty($tw.utils.convertStyleNameToPropertyName(styleProperties[i]));
}
}

/*
Remove single style property of an element
element: dom node
styleProperty: string property name
*/
exports.removeStyle = function(element, styleProperty) {
$tw.utils.removeStyles(element, [styleProperty])
}

/*
Converts a standard CSS property name into the local browser-specific equivalent. For example:
"background-color" --> "backgroundColor"
Expand Down