Add page transition animations to Privacy Guide

Adds a new type of animation to cr-view-manager: "slide-in-fade-in".
This is inspired by the proof-of-concept CL here:
https://chromium-review.googlesource.com/c/chromium/src/+/3229607

This animation is then used in the Privacy Guide.

Bug: 1215630
Change-Id: Idad17ecb1ea6a6e15d0d2576e9f67ad4094c6af3
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/3396156
Reviewed-by: Rainhard Findling <rainhard@chromium.org>
Reviewed-by: Demetrios Papadopoulos <dpapad@chromium.org>
Commit-Queue: Martin Šrámek <msramek@chromium.org>
Cr-Commit-Position: refs/heads/main@{#960565}

chrome/browser/resources/settings/privacy_page/privacy_review/privacy_review_page.ts

@@ -396,7 +396,8 @@ export class SettingsPrivacyReviewPageElement extends PrivacyReviewBase {
       }
     } else {
       if (this.animationsEnabled_ && playAnimation) {
-        this.$.viewManager.switchView(this.privacyReviewStep_);
+        this.$.viewManager.switchView(
+            this.privacyReviewStep_, 'slide-in-fade-in', 'no-animation');
       } else {
         this.$.viewManager.switchView(
             this.privacyReviewStep_, 'no-animation', 'no-animation');

ui/webui/resources/cr_elements/cr_view_manager/cr_view_manager.js

@@ -39,9 +39,6 @@ function dispatchCustomEvent(element, eventType) {
 /** @type {!Map<string, function(!Element): !Promise>} */
 const viewAnimations = new Map();
 viewAnimations.set('fade-in', element => {
-  // The call to animate can have 2 methods of passing the keyframes, however as
-  // of the current closure version, only one of them is supported. See
-  // https://crbug.com/987842 for more info.
   const animation = element.animate(
       [{opacity: 0}, {opacity: 1}],
       /** @type {!KeyframeAnimationOptions } */ ({
@@ -53,9 +50,6 @@ viewAnimations.set('fade-in', element => {
   return whenFinished(animation);
 });
 viewAnimations.set('fade-out', element => {
-  // The call to animate can have 2 methods of passing the keyframes, however as
-  // of the current closure version, only one of them is supported. See
-  // https://crbug.com/987842 for more info.
   const animation = element.animate(
       [{opacity: 1}, {opacity: 0}],
       /** @type {!KeyframeAnimationOptions} */ ({
@@ -66,6 +60,21 @@ viewAnimations.set('fade-out', element => {
 
   return whenFinished(animation);
 });
+viewAnimations.set('slide-in-fade-in', element => {
+  const animation = element.animate(
+      [
+        {transform: 'translateX(8px)', opacity: 0},
+        {transform: 'translateX(0)', opacity: 1}
+      ],
+      /** @type {!KeyframeAnimationOptions} */ ({
+        duration: 300,
+        easing: 'cubic-bezier(0.0, 0.0, 0.2, 1)',
+        fill: 'forwards',
+        iterations: 1,
+      }));
+
+  return whenFinished(animation);
+});
 
 /** @polymer */
 export class CrViewManagerElement extends PolymerElement {