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 1 commit
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
8 changes: 4 additions & 4 deletions core/modules/storyviews/classic.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,16 +47,16 @@ ClassicStoryView.prototype.insert = function(widget) {
// Reset the margin once the transition is over
setTimeout(function() {
$tw.utils.setStyle(targetElement,[
{transition: "none"},
{marginBottom: ""}
]);
targetElement.style.removeProperty('transition');
},duration);
// Set up the initial position of the element
$tw.utils.setStyle(targetElement,[
{transition: "none"},
{marginBottom: (-currHeight) + "px"},
{opacity: "0.0"}
]);
targetElement.style.removeProperty('transition');
$tw.utils.forceLayout(targetElement);
// Transition to the final position
$tw.utils.setStyle(targetElement,[
Expand Down Expand Up @@ -94,11 +94,11 @@ 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"}
]);
targetElement.style.removeProperty('transition');
$tw.utils.forceLayout(targetElement);
$tw.utils.setStyle(targetElement,[
{transition: $tw.utils.roundTripPropertyName("transform") + " " + duration + "ms " + easing + ", " +
Expand All @@ -113,4 +113,4 @@ ClassicStoryView.prototype.remove = function(widget) {
}
};

exports.classic = ClassicStoryView;
exports.classic = ClassicStoryView;
8 changes: 4 additions & 4 deletions core/modules/storyviews/pop.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,9 +38,9 @@ PopStoryView.prototype.insert = function(widget) {
// Reset once the transition is over
setTimeout(function() {
$tw.utils.setStyle(targetElement,[
{transition: "none"},
{transform: "none"}
]);
targetElement.style.removeProperty('transition');
$tw.utils.setStyle(widget.document.body,[
{"overflow-x": ""}
]);
Expand All @@ -51,10 +51,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"}
]);
targetElement.style.removeProperty('transition');
$tw.utils.forceLayout(targetElement);
// Transition to the final position
$tw.utils.setStyle(targetElement,[
Expand Down Expand Up @@ -82,10 +82,10 @@ PopStoryView.prototype.remove = function(widget) {
setTimeout(removeElement,duration);
// Animate the closure
$tw.utils.setStyle(targetElement,[
{transition: "none"},
{transform: "scale(1)"},
{opacity: "1.0"}
]);
targetElement.style.removeProperty('transition');
$tw.utils.forceLayout(targetElement);
$tw.utils.setStyle(targetElement,[
{transition: $tw.utils.roundTripPropertyName("transform") + " " + duration + "ms ease-in-out, " +
Expand All @@ -95,4 +95,4 @@ PopStoryView.prototype.remove = function(widget) {
]);
};

exports.pop = PopStoryView;
exports.pop = PopStoryView;
7 changes: 4 additions & 3 deletions core/modules/storyviews/zoomin.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -61,9 +61,9 @@ ZoominListView.prototype.navigateTo = function(historyInfo) {
{display: "block"},
{transformOrigin: "0 0"},
{transform: "translateX(0px) translateY(0px) scale(1)"},
{transition: "none"},
{opacity: "0.0"}
]);
stargetElement.style.removeProperty('transition');
// Get the position of the source node, or use the centre of the window as the source position
var sourceBounds = historyInfo.fromPageRect || {
left: window.innerWidth/2 - 2,
Expand Down Expand Up @@ -169,9 +169,10 @@ ZoominListView.prototype.remove = function(widget) {
{display: "block"},
{transformOrigin: "50% 50%"},
{transform: "translateX(0px) translateY(0px) scale(1)"},
{transition: "none"},
{zIndex: "0"}
]);
targetElement.style.removeProperty('transition');

// We'll move back to the previous or next element in the story
var toWidget = widget.previousSibling();
if(!toWidget) {
Expand Down Expand Up @@ -222,4 +223,4 @@ ZoominListView.prototype.logTextNodeRoot = function(node) {
this.textNodeLogger.log($tw.language.getString("Error/ZoominTextNode") + " " + node.textContent);
};

exports.zoomin = ZoominListView;
exports.zoomin = ZoominListView;
8 changes: 4 additions & 4 deletions core/modules/utils/dom/animations/slide.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,6 @@ function slideOpen(domNode,options) {
// Reset the margin once the transition is over
setTimeout(function() {
$tw.utils.setStyle(domNode,[
{transition: "none"},
{marginBottom: ""},
{marginTop: ""},
{paddingBottom: ""},
Expand All @@ -33,17 +32,18 @@ function slideOpen(domNode,options) {
if(options.callback) {
options.callback();
}
domNode.style.removeProperty('transition');
},duration);
// Set up the initial position of the element
$tw.utils.setStyle(domNode,[
{transition: "none"},
{marginTop: "0px"},
{marginBottom: "0px"},
{paddingTop: "0px"},
{paddingBottom: "0px"},
{height: "0px"},
{opacity: "0"}
]);
domNode.style.removeProperty('transition');
$tw.utils.forceLayout(domNode);
// Transition to the final position
$tw.utils.setStyle(domNode,[
Expand All @@ -69,7 +69,6 @@ function slideClosed(domNode,options) {
// Clear the properties we've set when the animation is over
setTimeout(function() {
$tw.utils.setStyle(domNode,[
{transition: "none"},
{marginBottom: ""},
{marginTop: ""},
{paddingBottom: ""},
Expand All @@ -80,6 +79,7 @@ function slideClosed(domNode,options) {
if(options.callback) {
options.callback();
}
domNode.style.removeProperty('transition');
},duration);
// Set up the initial position of the element
$tw.utils.setStyle(domNode,[
Expand Down Expand Up @@ -107,4 +107,4 @@ function slideClosed(domNode,options) {
exports.slide = {
open: slideOpen,
close: slideClosed
};
};
4 changes: 2 additions & 2 deletions plugins/tiddlywiki/cecily/cecily.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -63,9 +63,9 @@ CecilyStoryView.prototype.remove = function(widget) {
},duration);
// Animate the closure
$tw.utils.setStyle(targetElement,[
{transition: "none"},
{opacity: "1.0"}
]);
targetElement.style.removeProperty('transition');
$tw.utils.forceLayout(targetElement);
$tw.utils.setStyle(targetElement,[
{transition: $tw.utils.roundTripPropertyName("transform") + " " + duration + "ms ease-in-out, " +
Expand Down Expand Up @@ -137,4 +137,4 @@ CecilyStoryView.prototype.lookupTiddlerInMap = function(title,domNode) {
return newPosition;
};

exports.cecily = CecilyStoryView;
exports.cecily = CecilyStoryView;