Add a popping animation to the tags editor

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

@@ -0,0 +1,75 @@
+/*\
+title: $:/core/modules/widgets/list/listviews/pop.js
+type: application/javascript
+module-type: listview
+
+Animates list insertions and removals
+
+\*/
+(function(){
+
+/*jslint node: true, browser: true */
+/*global $tw: false */
+"use strict";
+
+var PopListView = function(listWidget) {
+	this.listWidget = listWidget;
+}
+
+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");
+	targetElement.addEventListener(transitionEventName,function handler(event) {
+		$tw.utils.setStyle(targetElement,[
+			{transition: "none"},
+			{transform: "none"}
+		]);
+		targetElement.removeEventListener(transitionEventName,handler,false);
+	},false);
+	// Set up the initial position of the element
+	$tw.utils.setStyle(targetElement,[
+		{transition: "none"},
+		{transform: "scale(2)"},
+		{opacity: "0.0"}
+	]);
+	$tw.utils.forceLayout(targetElement);
+	// Transition to the final position
+	$tw.utils.setStyle(targetElement,[
+		{transition: $tw.utils.roundTripPropertyName("transform") + " " + $tw.config.preferences.animationDurationMs + " ease-in-out, " +
+					"opacity " + $tw.config.preferences.animationDurationMs + " ease-in-out"},
+		{transform: "scale(1)"},
+		{opacity: "1.0"}
+	]);
+};
+
+PopListView.prototype.remove = function(index) {
+	var listElementNode = this.listWidget.children[index],
+		targetElement = listElementNode.domNode;
+	// Attach an event handler for the end of the transition
+	targetElement.addEventListener($tw.utils.convertEventName("transitionEnd"),function(event) {
+		if(targetElement.parentNode) {
+			targetElement.parentNode.removeChild(targetElement);
+		}
+	},false);
+	// Animate the closure
+	$tw.utils.setStyle(targetElement,[
+		{transition: "none"},
+		{transform: "scale(1)"},
+		{opacity: "1.0"}
+	]);
+	$tw.utils.forceLayout(targetElement);
+	$tw.utils.setStyle(targetElement,[
+		{transition: $tw.utils.roundTripPropertyName("transform") + " " + $tw.config.preferences.animationDurationMs + " ease-in-out, " +
+					"opacity " + $tw.config.preferences.animationDurationMs + " ease-in-out"},
+		{transform: "scale(0.1)"},
+		{opacity: "0.0"}
+	]);
+	// Returning true causes the DOM node not to be deleted
+	return true;
+};
+
+exports.pop = PopListView;
+
+})();

core/ui/TagsEditor.tid

@@ -1,6 +1,6 @@
 title: $:/core/ui/TagsEditor
 
-<$fieldmangler><div class="tw-edit-tags-list"><$list filter="[is[current]tags[]sort[title]]"><$setstyle name="background-color" value={{!!color}} class="tw-tag-label"><$view field="title" format="text" /><$button message="tw-remove-tag" class="btn-invisible tw-remove-tag-button">&times;</$button></$setstyle>
+<$fieldmangler><div class="tw-edit-tags-list"><$list filter="[is[current]tags[]sort[title]]" listview="pop" itemClass="tw-tag-editor-label"><$setstyle name="background-color" value={{!!color}} class="tw-tag-label"><$view field="title" format="text" /><$button message="tw-remove-tag" class="btn-invisible tw-remove-tag-button">&times;</$button></$setstyle>
 </$list></div>
 
 <div class="tw-add-tag">Add a new tag: <span class="tw-add-tag-name"><$edit tiddler="$:/NewTagName" type="input" default="" placeholder="tag name" focusSet="$:/state/tagsAutoComplete" qualifyTiddlerTitles="yes"/></span> <$button popup="$:/state/tagsAutoComplete" qualifyTiddlerTitles="yes" class="btn-invisible">{{$:/core/images/down-arrow}}</$button> <span class="tw-add-tag-button"><$button message="tw-add-tag" param={{$:/NewTagName}} set="$:/NewTagName" setTo="" class="">add</$button></span></div>

themes/tiddlywiki/snowwhite/base.tid

@@ -472,6 +472,11 @@ canvas.tw-edit-bitmapeditor  {
 	margin: 1em 0 1em 0;
 }
 
+.tw-tag-editor-label {
+	display: inline-block;
+	margin-right: 0.5em;
+}
+
 .tw-remove-tag-button {
 	padding-left: 4px;
 }