MD Settings: Custom expand/collapse section animations.

chrome/browser/resources/settings/settings_page/transition_behavior.js

Index: chrome/browser/resources/settings/settings_page/transition_behavior.js
diff --git a/chrome/browser/resources/settings/settings_page/transition_behavior.js b/chrome/browser/resources/settings/settings_page/transition_behavior.js
new file mode 100644
index 0000000000000000000000000000000000000000..fd7e115a58440bfef0070b17c8b5ecf2c435b57a
--- /dev/null
+++ b/chrome/browser/resources/settings/settings_page/transition_behavior.js
@@ -0,0 +1,87 @@
+// Copyright 2016 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.
+
+/**
+ * Adds convenience functions to control native Web Animations. The
+ * implementation details may change as Chrome support evolves.
+ * @polymerBehavior
+ */
+var TransitionBehavior = {
+  ready: function() {
+    /**
+     * @type {!Array<!Animation>}

[Dan Beam, 2016/02/26 19:18:23]

wat, Object<!Animation>?

[michaelpg, 2016/03/01 00:18:28]

Done.

+     * Map of running animations by animation name. Animation names are
+     * arbitrary but used to prevent multiple animations of the same type (e.g.,
+     * expand/collapse section) from running simultaneously.
+     */
+    this.animations = {};
+  },
+
+  /**
+   * Calls el.animate(keyframes, options). Returns a Promise which is resolved
+   * when the transition ends, or rejected when the transition is cancelled.
+   * If an animation with the same name is in progress, that animation is
+   * finished immediately before creating the new animation.
+   * @param {string} name Name of the animation, used to finish this animation
+   *     when playing the same type of animation again.
+   * @param {!HTMLElement} el The element to animate.
+   * @param {!Array|!Object} keyframes Keyframes, as in Element.animate.
+   * @param {number|!Object} options Options, as in Element.animate.
+   * @return {!Promise} A promise which is resolved when the animation finishes
+   *     or rejected if the animation is cancelled.
+   */
+  animateElement: function(name, el, keyframes, options) {
+    if (this.animations[name])
+      this.animations[name].finish();
+
+    var animation = el.animate(keyframes, options);
+    this.animations[name] = animation;
+
+    return new Promise(function(resolve, reject) {

[Dan Beam, 2016/02/26 19:18:23]

return this.promises_[name] = new Promise(...);

[michaelpg, 2016/03/01 00:18:28]

Done.

[Dan Beam, 2016/03/04 19:24:24]

thank you, i think the new code is much simpler

+      animation.addEventListener('finish', function() {
+        this.animations[name] = undefined;
+        resolve();
+      }.bind(this));
+
+      animation.addEventListener('cancel', function() {
+        this.animations[name] = undefined;
+        reject();
+      }.bind(this));
+    }.bind(this));
+  },
+
+  /**
+   * Finishes the ongoing named animation, waits for the animation's Promise
+   * to be resolved, then calls the callback.
+   * @param {string} name Name of the animation passed to animateElement.
+   * @param {function()=} opt_callback Called once the animation finishes.
+   */
+  finishAnimation: function(name, opt_callback) {

[Dan Beam, 2016/02/26 19:18:24]

this.promises_[name].then(opt_callback);

[michaelpg, 2016/03/01 00:18:28]

Done.

+    if (opt_callback) {
+      this.animations[name].addEventListener('finish', function() {
+        // Schedule a task with setTimeout to allow the animation's Promise
+        // handlers to be run first.
+        setTimeout(/** @type {Function} */(opt_callback));
+      });
+    }
+    this.animations[name].finish();
+  },
+
+  /**
+   * Cancels the ongoing named animation, waits for the animation's Promise
+   * to be rejected, then calls the callback.
+   * @param {string} name Name of the animation passed to animateElement.
+   * @param {function()=} opt_callback Called once the animation cancels.
+   */
+  cancelAnimation: function(name, opt_callback) {
+    if (opt_callback) {

[Dan Beam, 2016/02/26 19:18:23]

this.promise_[name].catch(opt_callback);

[michaelpg, 2016/03/01 00:18:28]

Done.

+      this.animations[name].addEventListener('cancel', function() {
+        // Schedule a task with setTimeout to allow the animation's Promise
+        // handlers to be run first.
+        setTimeout(/** @type {Function} */(opt_callback));
+      });
+    }
+    this.animations[name].cancel();
+  },
+};