[files-banner] Add FilesNG banner motion effects.

The warning divs get important display rule to prevent default
display: none as it prevents animation.

The hide action handled by visibility rule.

Bug: 1083026
Change-Id: I53112d9029b2c8d621a974668cbf39a82d428420
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2228017Reviewed-by: Alex Danilo <adanilo@chromium.org>
Reviewed-by: Luciano Pacheco <lucmult@chromium.org>
Commit-Queue: Omid Tourzan <oto@chromium.org>
Cr-Commit-Position: refs/heads/master@{#774924}

ui/file_manager/file_manager/foreground/css/drive_welcome.css

@@ -45,14 +45,25 @@ body.files-ng .drive-welcome.header {
   box-sizing: border-box;
   flex: none;
   height: 72px;
+  opacity: 1;
   overflow-x: hidden;
   overflow-y: auto;
   position: relative;
-  transition: height 180ms ease, visibility 0ms linear 180ms;
+  transition: height 300ms cubic-bezier(0.4, 0, 0.2, 1),
+              opacity 150ms ease 50ms;
+  visibility: visible;
+}
+
+body:not(.files-ng) .dialog-container:not([drive-welcome='header'])
+.drive-welcome.header {
+  height: 0;
+  visibility: hidden;
 }
 
-.dialog-container:not([drive-welcome='header']) .drive-welcome.header {
+body.files-ng .dialog-container:not([drive-welcome='header'])
+.drive-welcome.header {
   height: 0;
+  opacity: 0;
   visibility: hidden;
 }
 

ui/file_manager/file_manager/foreground/css/file_manager.css

@@ -1754,6 +1754,10 @@ body.files-ng .downloads-warning {
   flex: none;
   flex-direction: row;
   height: 40px;
+  opacity: 1;
+  transition: height 300ms cubic-bezier(0.4, 0, 0.2, 1) 0s,
+              opacity 150ms ease 50ms;
+  visibility: visible;
 }
 
 body:not(.files-ng) .downloads-warning a:link,
@@ -1798,6 +1802,13 @@ body:not(.files-ng) .downloads-warning[hidden] {
   height: 0;
 }
 
+body.files-ng .downloads-warning[hidden] {
+  display: flex !important;  /* Overrides [hidden] for animation. */
+  height: 0;
+  opacity: 0;
+  visibility: hidden;
+}
+
 @keyframes heightAnimation {
   0% {
     display: flex;
@@ -1829,13 +1840,25 @@ body.files-ng .volume-warning {
   flex-direction: row;
   font-size: 13px;
   height: 40px;
+  opacity: 1;
   overflow: hidden;
   position: relative;
+  transition: height 300ms cubic-bezier(0.4, 0, 0.2, 1) 0s,
+              opacity 150ms ease 50ms;
+  visibility: visible;
+}
+
+body:not(.files-ng) .volume-warning[hidden] {
+  border-top-width: 0;
+  height: 0;
 }
 
-.volume-warning[hidden] {
+body.files-ng .volume-warning[hidden] {
   border-top-width: 0;
+  display: flex !important;  /* Overrides [hidden] for animation. */
   height: 0;
+  opacity: 0;
+  visibility: hidden;
 }
 
 body:not(.files-ng) .volume-warning .drive-icon {