MD Settings: Shorten page fade transitions

chrome/browser/resources/settings/animation/fade_animations.js

Index: chrome/browser/resources/settings/animation/fade_animations.js
diff --git a/chrome/browser/resources/settings/animation/fade_animations.js b/chrome/browser/resources/settings/animation/fade_animations.js
new file mode 100644
index 0000000000000000000000000000000000000000..b2d74d4f12f33750a9295b93a0a32a1081c96696
--- /dev/null
+++ b/chrome/browser/resources/settings/animation/fade_animations.js
@@ -0,0 +1,45 @@
+// Copyright 2017 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.
+
+/**
+ * @fileoverview Defines fade animations similar to Polymer's fade-in-animation
+ * and fade-out-animation, but with Settings-specific timings.
+ */
+Polymer({
+  is: 'settings-fade-in-animation',
+
+  behaviors: [Polymer.NeonAnimationBehavior],
+
+  configure: function(config) {
+    var node = config.node;
+    this._effect = new KeyframeEffect(node, [
+      {'opacity': '0'},
+      {'opacity': '1'}

[Dan Beam, 2017/05/04 22:46:37]

fun fact: if you add a trailing comma, clang-format acts differently about long
literals

[michaelpg, 2017/05/04 23:07:25]

Nice. I like trailing commas (this was mostly copied from the Polymer source).

Also forgot to add to compiled_resources2.gyp so here's PS3.

+    ], {
+      duration: settings.animation.Timing.DURATION,
+      easing: settings.animation.Timing.EASING,
+      fill: 'both',
+    });
+    return this._effect;
+  }
+});
+
+Polymer({
+  is: 'settings-fade-out-animation',
+
+  behaviors: [Polymer.NeonAnimationBehavior],
+
+  configure: function(config) {
+    var node = config.node;
+    this._effect = new KeyframeEffect(node, [
+      {'opacity': '1'},
+      {'opacity': '0'}
+    ], {
+      duration: settings.animation.Timing.DURATION,
+      easing: settings.animation.Timing.EASING,
+      fill: 'both',
+    });
+    return this._effect;
+  }
+});