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

BUG=266714
TEST=manual
R=mtomasz@chromium.org

Review URL: https://codereview.chromium.org/22638007

git-svn-id: svn://svn.chromium.org/chrome/trunk/src@216611 0039d316-1c4b-4281-b951-d872f2087c98

2 files changed, 39 insertions, 0 deletions

diff --git a/chrome/browser/resources/file_manager/css/file_manager.css b/chrome/browser/resources/file_manager/css/file_manager.css
index ae84a63..8ab865b 100644
--- a/chrome/browser/resources/file_manager/css/file_manager.css
+++ b/chrome/browser/resources/file_manager/css/file_manager.css
@@ -248,12 +248,22 @@ div.splitter {
 }
 
 #volume-list li.root-item {
+  -webkit-animation: fadeIn 150ms ease-in-out;
   -webkit-box-align: center;
   display: -webkit-box;
   line-height: 22px;  /* To accomodate for icons. */
   padding-left: 11px;
 }
 
+/* This selector is used by JavaScript. "fadeout" class will be dinamically
+   added to elements.
+   Must keep the class name 'fadeout' and the animation name 'fadeOut' in sync
+   with JavaScript. */
+#volume-list li.root-item.fadeout {
+  -webkit-animation: fadeOut 150ms ease-in-out;
+  opacity: 0;
+}
+
 #volume-list li.root-item > .root-label {
   -webkit-box-flex: 1;
   margin: 0 2px;
@@ -1154,6 +1164,15 @@ input.rename {
   }
 }
 
+@-webkit-keyframes fadeOut {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+
 .preview-thumbnails > .popup {
   -webkit-transform: translate(0, 3px) scale(0.95);
   background-color: #f2f2f2;
diff --git a/chrome/browser/resources/file_manager/js/navigation_list.js b/chrome/browser/resources/file_manager/js/navigation_list.js
index f969f1d..481e05d 100644
--- a/chrome/browser/resources/file_manager/js/navigation_list.js
+++ b/chrome/browser/resources/file_manager/js/navigation_list.js
@@ -281,6 +281,26 @@ 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')
+      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.