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

@@ -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;

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;

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;

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<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"