Add fade-in and fade-out animation on creating/deleting an item in NavList in Files.app

chrome/browser/resources/file_manager/js/navigation_list.js

Index: chrome/browser/resources/file_manager/js/navigation_list.js
diff --git a/chrome/browser/resources/file_manager/js/navigation_list.js b/chrome/browser/resources/file_manager/js/navigation_list.js
index 16bd17bda2533b876a04a7a02b3eb5f9961be7f9..7d6e6280dd5434d87a262d7eb0dde128c5fd722e 100644
--- a/chrome/browser/resources/file_manager/js/navigation_list.js
+++ b/chrome/browser/resources/file_manager/js/navigation_list.js
@@ -283,6 +283,28 @@ NavigationList.prototype.decorate = function(directoryModel) {
 };
 
 /**
+ * This overrides Node.removeChild().
+ * Instead of just removing the given child, this method adds a fade-out
+ * animation and removes the child after animation completes.
+ *
+ * @param {NavigationListItem} item List item to be removed.
+ * @override
+ */
+NavigationList.prototype.removeChild = function(item) {
+  var removeElement = function(e) {
+    // Must keep the animation name 'fadeOut' in sync with the css.
+    if (e.animationName == 'fadeOut')
+      // Checks if the element is still alive on the DOM tree.
+      if (item.parentElement && item.parentElement == this)
+        Node.prototype.removeChild.call(this, item);
+  }.bind(this);
+
+  item.addEventListener('webkitAnimationEnd', removeElement, false);
+  // Must keep the class name 'fadeout' in sync with the css.
+  item.classList.add('fadeout');
+};
+
+/**
  * Creates an element of a navigation list. This method is called from
  * cr.ui.List internally.
  * @param {string} path Path of the directory to be rendered.