MD Settings: Custom expand/collapse section animations.

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

+// 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 {!Object<!Animation>}
+     * 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 = {};
+
+    /**
+     * @private {!Object<!Promise>}
+     * Map of Promises for each running animation. Key names and existence
+     * should correspond with |animations|.
+     */
+    this.promises_ = {};
+  },
+
+  /**
+   * Calls el.animate(keyframes, opt_options). Returns a Promise which is
+   * resolved when the transition ends, or rejected when the transition is
+   * canceled. 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|!KeyframeEffectOptions=} opt_options Options, as in
+   *     Element.animate.
+   * @return {!Promise} A promise which is resolved when the animation finishes
+   *     or rejected if the animation is canceled.
+   */
+  animateElement: function(name, el, keyframes, opt_options) {
+    if (this.animations[name])
+      this.animations[name].finish();
+
+    var animation = el.animate(keyframes, opt_options);
+    this.animations[name] = animation;
+
+    this.promises_[name] = new Promise(function(resolve, reject) {
+      animation.addEventListener('finish', function() {
+        this.animations[name] = undefined;
+        resolve();
+      }.bind(this));
+
+      animation.addEventListener('cancel', function() {
+        this.animations[name] = undefined;
+        reject();
+      }.bind(this));
+    }.bind(this));
+    return this.promises_[name];
+  },
+
+  /**
+   * 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) {
+    if (opt_callback)
+      this.promises_[name].then(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)
+      this.promises_[name].catch(opt_callback);
+    this.animations[name].cancel();
+  },
+};