[webui][ntp] Add text animations to voice search overlay

Bug: 1042534
Change-Id: Icfeac3fd1d4361227a56119ffeb71c5797a6be5f
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2032431
Commit-Queue: Tibor Goldschwendt <tiborg@chromium.org>
Reviewed-by: Esmael Elmoslimany <aee@chromium.org>
Cr-Commit-Position: refs/heads/master@{#738307}

chrome/browser/resources/new_tab_page/voice_search_overlay.html

@@ -58,11 +58,39 @@
 
   #texts {
     color: var(--ntp-secondary-text-color);
+    display: grid;
     flex-grow: 1;
     font-size: 32px;
     text-align: start;
   }
 
+  #texts > *,
+  #micContainer > * {
+    grid-column-start: 1;
+    grid-row-start: 1;
+  }
+
+  *[text] {
+    transition-delay: 200ms;
+    transition-duration: 500ms;
+    transition-property: opacity, padding-inline-start;
+    transition-timing-function: ease-out;
+    visibility: hidden;
+    width: 100%;
+  }
+
+  *[text='waiting'],
+  *[text='speak'] {
+    opacity: 0;
+    padding-inline-start: 50px;
+  }
+
+  *[text][visible] {
+    opacity: 1;
+    padding-inline-start: 0;
+    visibility: visible;
+  }
+
   #finalResult {
     color: var(--ntp-primary-text-color);
   }
@@ -91,11 +119,6 @@
     width: var(--mic-container-size);
   }
 
-  #micContainer > * {
-    grid-column-start: 1;
-    grid-row-start: 1;
-  }
-
   #micVolume {
     --mic-volume-size: calc(var(--mic-button-size) +
         var(--mic-volume-level) * (var(--mic-container-size) -
@@ -151,11 +174,11 @@
 </style>
 <dialog id="dialog" on-close="onOverlayClose_" on-click="onOverlayClick_">
   <button id="closeButton" tabindex="0" title="$i18n{close}">×</button>
-  <!-- TODO(crbug.com/1042534): Add animations. -->
   <!-- TODO(crbug.com/1042534): Add Listening state. -->
   <div id="content">
-    <iron-pages id="texts" selected="[[getText_(state_)]]"
-        attr-for-selected="text" fallback-selection="none" aria-live="polite">
+    <iron-selector id="texts" selected="[[getText_(state_)]]"
+        attr-for-selected="text" fallback-selection="none" aria-live="polite"
+        selected-attribute="visible">
       <div text="none"></div>
       <div text="waiting">$i18n{waiting}</div>
       <div text="speak">$i18n{speak}</div>
@@ -189,7 +212,7 @@
           </a>
         </iron-pages>
       </div>
-    </iron-pages>
+    </iron-selector>
     <div id="micContainer" class$="[[getMicClass_(state_)]]">
       <div id="micVolume"
           style="--mic-volume-level: [[micVolumeLevel_]];

chrome/browser/resources/new_tab_page/voice_search_overlay.js

@@ -3,6 +3,7 @@
 // found in the LICENSE file.
 
 import 'chrome://resources/polymer/v3_0/iron-pages/iron-pages.js';
+import 'chrome://resources/polymer/v3_0/iron-selector/iron-selector.js';
 import 'chrome://resources/cr_elements/cr_button/cr_button.m.js';
 
 import {loadTimeData} from 'chrome://resources/js/load_time_data.m.js';