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

chrome/browser/resources/file_manager/css/file_manager.css

Index: chrome/browser/resources/file_manager/css/file_manager.css
diff --git a/chrome/browser/resources/file_manager/css/file_manager.css b/chrome/browser/resources/file_manager/css/file_manager.css
index a8da017e4095fab383682d5597cdc2441ccc258c..28e9ef44639cc031cfcd2141444ff1a250c86270 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 0 1 normal both;
+  opacity: 0;
+}
+
 #volume-list li.root-item > .root-label {
   -webkit-box-flex: 1;
   margin: 0 2px;
@@ -1156,6 +1166,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;