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

 // Copyright (c) 2012 The Chromium Authors. All rights reserved.
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
 'use strict';
 
 /**
  * A navigation list model. This model combines the 2 lists.
  * @param {cr.ui.ArrayDataModel} volumesList The first list of the model.
  * @param {cr.ui.ArrayDataModel} pinnedList The second list of the model.
@@ skipping 265 matching lines @@
   // role for better accessibility on ChromeOS.
   this.setAttribute('role', 'listbox');
 
   var self = this;
   this.itemConstructor = function(path) {
     return self.renderRoot_(path);
   };
 };
 
 /**
+ * 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.
  * @return {NavigationListItem} Rendered element.
  * @private
  */
 NavigationList.prototype.renderRoot_ = function(path) {
   var item = new NavigationListItem();
   item.setPath(path);
 
@@ skipping 151 matching lines @@
     var itemPath = this.dataModel.item(i);
     if (PathUtil.getRootPath(itemPath) == newRootPath) {
       // Not to invoke the handler of this instance, sets the guard.
       this.dontHandleSelectionEvent_ = true;
       this.selectionModel.selectedIndex = i;
       this.dontHandleSelectionEvent_ = false;
       return;
     }
   }
 };