From ad6ac480f9683a4bdb0a3f09f961b97509274e00 Mon Sep 17 00:00:00 2001 From: Scott Sauyet Date: Tue, 21 Oct 2025 06:57:10 -0400 Subject: [PATCH] Remove css props rather than setting transition to none (#9284) * Use style property deletion rather than setting to none * Remove cecily and slide, fix quotation marks * Fix returning typo * Add helper functions, use some timeouts to order events --- core/modules/storyviews/classic.js | 12 +++++------- core/modules/storyviews/pop.js | 18 +++++++----------- core/modules/storyviews/zoomin.js | 8 +++++++- core/modules/utils/dom/browser.js | 20 ++++++++++++++++++++ 4 files changed, 39 insertions(+), 19 deletions(-) diff --git a/core/modules/storyviews/classic.js b/core/modules/storyviews/classic.js index c1f1c0e0f..341c51221 100644 --- a/core/modules/storyviews/classic.js +++ b/core/modules/storyviews/classic.js @@ -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: ""} ]); + $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,[ @@ -64,7 +64,7 @@ ClassicStoryView.prototype.insert = function(widget) { "margin-bottom " + duration + "ms " + easing}, {marginBottom: currMarginBottom + "px"}, {opacity: "1.0"} - ]); + ]); } }; @@ -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 + ", " + @@ -113,4 +111,4 @@ ClassicStoryView.prototype.remove = function(widget) { } }; -exports.classic = ClassicStoryView; +exports.classic = ClassicStoryView; \ No newline at end of file diff --git a/core/modules/storyviews/pop.js b/core/modules/storyviews/pop.js index cbf649b18..96bc6819e 100644 --- a/core/modules/storyviews/pop.js +++ b/core/modules/storyviews/pop.js @@ -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": ""} ]); @@ -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,[ @@ -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) { @@ -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, " + @@ -95,4 +91,4 @@ PopStoryView.prototype.remove = function(widget) { ]); }; -exports.pop = PopStoryView; +exports.pop = PopStoryView; \ No newline at end of file diff --git a/core/modules/storyviews/zoomin.js b/core/modules/storyviews/zoomin.js index e5c5b88a8..4ddba7174 100644 --- a/core/modules/storyviews/zoomin.js +++ b/core/modules/storyviews/zoomin.js @@ -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; @@ -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) { @@ -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; \ No newline at end of file diff --git a/core/modules/utils/dom/browser.js b/core/modules/utils/dom/browser.js index 7501d4154..11905a1fe 100644 --- a/core/modules/utils/dom/browser.js +++ b/core/modules/utils/dom/browser.js @@ -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 "backgroundColor"