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

 /* 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. */
 
 /* Special attribute used in HTML to hide elements. */
 body[type='folder'] [invisibleif~='folder'],
 body[type='upload-folder'] [invisibleif~='upload-folder'],
 body[type='saveas-file'] [invisibleif~='saveas-file'],
 body[type='open-file'] [invisibleif~='open-file'],
 body[type='open-multi-file'] [invisibleif~='open-multi-file'],
@@ skipping 230 matching lines @@
 #volume-list:focus > .accepts,
 #volume-list:focus > [lead][selected],
 #volume-list:focus > [lead],
 #volume-list:focus > [selected],
 #volume-list:focus > [anchor] {
   background-color: rgb(66, 129, 244);
   color: white;
 }
 
 #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;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
 #volume-list .volume-icon {
   background-position: center 2px;
@@ skipping 882 matching lines @@
 
 @-webkit-keyframes fadeIn {
   from {
     opacity: 0;
   }
   to {
     opacity: 1;
   }
 }
 
+@-webkit-keyframes fadeOut {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+
 .preview-thumbnails > .popup {
   -webkit-transform: translate(0, 3px) scale(0.95);
   background-color: #f2f2f2;
   border: 2px solid #fff;
   box-shadow: 0 0 0 1px #F0F0F0,
               0 0 0 2px #D0D0D0,
               2px 2px 6px rgba(0, 0, 0, 0.2);
   margin: 6px 0 0 -40px;
   opacity: 0;
   pointer-events: none;
@@ skipping 753 matching lines @@
 }
 
 .share-dialog-webview-wrapper:not(.loaded) .share-dialog-webview {
   visibility: hidden;
 }
 
 .share-dialog-frame .cr-dialog-text,
 .share-dialog-frame .cr-dialog-buttons {
   display: none;
 }