client/tags: fade out tag colors after 2.5s

client/css/forms.styl

@@ -174,15 +174,17 @@ input:disabled
     cursor: not-allowed
 
 div.tag-input
-    li.implication
+    li
-        background: $implied-tag-background-color
+        transition: background-color 0.5s linear
-        color: $implied-tag-text-color
+        &.implication
-    li.new
+            background: $implied-tag-background-color
-        background: $new-tag-background-color
+            color: $implied-tag-text-color
-        color: $new-tag-text-color
+        &.new
-    li.duplicate
+            background: $new-tag-background-color
-        background: $duplicate-tag-background-color
+            color: $new-tag-text-color
-        color: $duplicate-tag-text-color
+        &.duplicate
+            background: $duplicate-tag-background-color
+            color: $duplicate-tag-text-color
     ul
         margin-top: 0.2em
 

client/js/controls/tag_input_control.js

@@ -14,6 +14,21 @@ const SOURCE_INIT = 'init';
 const SOURCE_IMPLICATION = 'implication';
 const SOURCE_USER_INPUT = 'user-input';
 
+function _fadeOutListItemNodeStatus(listItemNode) {
+    if (listItemNode.classList.length) {
+        if (listItemNode.fadeTimeout) {
+            window.clearTimeout(listItemNode.fadeTimeout);
+        }
+        listItemNode.fadeTimeout = window.setTimeout(() => {
+            while (listItemNode.classList.length) {
+                listItemNode.classList.remove(
+                    listItemNode.classList.item(0));
+            }
+            listItemNode.fadeTimeout = null;
+        }, 2500);
+    }
+}
+
 class TagInputControl extends events.EventTarget {
     constructor(sourceInputNode) {
         super();
@@ -140,6 +155,7 @@ class TagInputControl extends events.EventTarget {
             }
             this._tagListNode.prependChild(listItemNode);
         }
+        _fadeOutListItemNodeStatus(listItemNode);
     }
 
     _evtTagRemoved(e) {