Update animations to use a timer instead the transitionEnd event

Thr trouble is that the transitionEnd event doesn't fire under some
circumstances (eg if the animated element is hidden). So, it's more
reliable to use a timer instead

core/modules/utils/dom/animations/slide.js

@@ -21,8 +21,7 @@ function slideOpen(domNode,options) {
 		currPaddingTop = parseInt(computedStyle.paddingTop,10),
 		currHeight = domNode.offsetHeight;
 	// Reset the margin once the transition is over
-	var transitionEventName = $tw.utils.convertEventName("transitionEnd");
+	setTimeout(function() {
-	domNode.addEventListener(transitionEventName,function handler(event) {
 		$tw.utils.setStyle(domNode,[
 			{transition: "none"},
 			{marginBottom: ""},
@@ -32,11 +31,10 @@ function slideOpen(domNode,options) {
 			{height: "auto"},
 			{opacity: ""}
 		]);
-		domNode.removeEventListener(transitionEventName,handler,false);
 		if(options.callback) {
 			options.callback();
 		}
-	},false);
+	},$tw.config.preferences.animationDuration);
 	// Set up the initial position of the element
 	$tw.utils.setStyle(domNode,[
 		{transition: "none"},
@@ -68,8 +66,7 @@ function slideOpen(domNode,options) {
 function slideClosed(domNode,options) {
 	var currHeight = domNode.offsetHeight;
 	// Clear the properties we've set when the animation is over
-	var transitionEventName = $tw.utils.convertEventName("transitionEnd");
+	setTimeout(function() {
-	domNode.addEventListener(transitionEventName,function handler(event) {
 		$tw.utils.setStyle(domNode,[
 			{transition: "none"},
 			{marginBottom: ""},
@@ -79,11 +76,10 @@ function slideClosed(domNode,options) {
 			{height: "auto"},
 			{opacity: ""}
 		]);
-		domNode.removeEventListener(transitionEventName,handler,false);
 		if(options.callback) {
 			options.callback();
 		}
-	},false);
+	},$tw.config.preferences.animationDuration);
 	// Set up the initial position of the element
 	$tw.utils.setStyle(domNode,[
 		{height: currHeight + "px"},

core/modules/widgets/list/listviews/classic.js

@@ -37,14 +37,12 @@ ClassicListView.prototype.insert = function(index) {
 		currMarginTop = parseInt(window.getComputedStyle(targetElement).marginTop,10),
 		currHeight = targetElement.offsetHeight + currMarginTop;
 	// Reset the margin once the transition is over
-	var transitionEventName = $tw.utils.convertEventName("transitionEnd");
+	setTimeout(function() {
-	targetElement.addEventListener(transitionEventName,function handler(event) {
 		$tw.utils.setStyle(targetElement,[
 			{transition: "none"},
 			{marginBottom: ""}
 		]);
-		targetElement.removeEventListener(transitionEventName,handler,false);
+	},$tw.config.preferences.animationDuration);
-	},false);
 	// Set up the initial position of the element
 	$tw.utils.setStyle(targetElement,[
 		{transition: "none"},
@@ -69,12 +67,12 @@ ClassicListView.prototype.remove = function(index) {
 		currMarginBottom = parseInt(window.getComputedStyle(targetElement).marginBottom,10),
 		currMarginTop = parseInt(window.getComputedStyle(targetElement).marginTop,10),
 		currHeight = targetElement.offsetHeight + currMarginTop;
-	// Attach an event handler for the end of the transition
+	// Remove the element at the end of the transition
-	targetElement.addEventListener($tw.utils.convertEventName("transitionEnd"),function(event) {
+	setTimeout(function() {
 		if(targetElement.parentNode) {
 			targetElement.parentNode.removeChild(targetElement);
 		}
-	},false);
+	},$tw.config.preferences.animationDuration);
 	// Animate the closure
 	$tw.utils.setStyle(targetElement,[
 		{transition: "none"},

core/modules/widgets/list/listviews/pop.js

@@ -20,14 +20,12 @@ PopListView.prototype.insert = function(index) {
 	var listElementNode = this.listWidget.children[index],
 		targetElement = listElementNode.domNode;
 	// Reset once the transition is over
-	var transitionEventName = $tw.utils.convertEventName("transitionEnd");
+	setTimeout(function() {
-	targetElement.addEventListener(transitionEventName,function handler(event) {
 		$tw.utils.setStyle(targetElement,[
 			{transition: "none"},
 			{transform: "none"}
 		]);
-		targetElement.removeEventListener(transitionEventName,handler,false);
+	},$tw.config.preferences.animationDuration);
-	},false);
 	// Set up the initial position of the element
 	$tw.utils.setStyle(targetElement,[
 		{transition: "none"},
@@ -47,14 +45,12 @@ PopListView.prototype.insert = function(index) {
 PopListView.prototype.remove = function(index) {
 	var listElementNode = this.listWidget.children[index],
 		targetElement = listElementNode.domNode;
-	// Attach an event handler for the end of the transition
+	// Remove the element at the end of the transition
-	var transitionEventName = $tw.utils.convertEventName("transitionEnd");
+	setTimeout(function() {
-	targetElement.addEventListener(transitionEventName,function handler(event) {
 		if(targetElement.parentNode) {
 			targetElement.parentNode.removeChild(targetElement);
 		}
-		targetElement.removeEventListener(transitionEventName,handler,false);
+	},$tw.config.preferences.animationDuration);
-	},false);
 	// Animate the closure
 	$tw.utils.setStyle(targetElement,[
 		{transition: "none"},

themes/tiddlywiki/snowwhite/base.tid

@@ -421,6 +421,10 @@ a.tw-tiddlylink-external {
 	color: #182955;
 }
 
+.title img {
+	height: 1em;
+}
+
 .tw-subtitle {
 	font-size: 0.9em;
 	color: #c0c0c0;