MD Settings: simplify animation scheduling

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

 // Copyright 2015 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
  * 'settings-section' shows a paper material themed section with a header
  * which shows its page title.
  *
  * The section can expand vertically to fill its container's padding edge.
@@ skipping 77 matching lines @@
   canAnimateExpand: function() {
     return !this.classList.contains('expanded');
   },
 
   /**
    * Animates the section expanding to fill the container. The section is fixed
    * in the viewport during the animation. The section adds the "expanding"
    * class while the animation plays.
    *
    * @param {!HTMLElement} container The scrolling container to fill.
-   * @return {?SettingsSectionElement.AnimationConfig}
+   * @return {?settings.animation.Animation} Animation played, if any.
    */
   animateExpand: function(container) {
     var card = this.$.card;
 
     // The card should start at the top of the page.
     var targetTop = container.getBoundingClientRect().top;
 
     this.classList.add('expanding');
 
     // Nothing to animate.
@@ skipping 10 matching lines @@
       minHeight: card.style.height,
       easing: EASING_FUNCTION,
     }, {
       top: targetTop + 'px',
       minHeight: 'calc(100% - ' + targetTop + 'px)',
     }];
     var options = /** @type {!KeyframeEffectOptions} */({
       duration: EXPAND_DURATION
     });
     // TODO(michaelpg): Change elevation of sections.
-    return {card: card, keyframes: keyframes, options: options};
+    return new settings.animation.Animation(card, keyframes, options);
   },
 
   /**
    * Cleans up after animateExpand().
    * @param {boolean} finished Whether the animation finished successfully.
    */
   cleanUpAnimateExpand: function(finished) {
     if (finished) {
       this.classList.add('expanded');
       this.$.card.style.top = '';
@@ skipping 10 matching lines @@
   canAnimateCollapse: function() {
     return this.classList.contains('expanded');
   },
 
   /**
    * Collapses an expanded section's card back into position in the main page.
    * Adds the "expanding" class during the animation.
    * @param {!HTMLElement} container The scrolling container the card fills.
    * @param {number} prevScrollTop scrollTop of the container before this
    *     section expanded.
-   * @return {?SettingsSectionElement.AnimationConfig}
+   * @return {?settings.animation.Animation} Animation played, if any.
    */
   animateCollapse: function(container, prevScrollTop) {
     this.$.header.hidden = false;
 
     var startingTop = container.getBoundingClientRect().top;
 
     var card = this.$.card;
     var cardHeightStart = card.clientHeight;
     var cardWidthStart = card.clientWidth;
 
@@ skipping 31 matching lines @@
     }, {
       top: targetTop + 'px',
       minHeight: card.origHeight_ + 'px',
     }];
     var options = /** @type {!KeyframeEffectOptions} */({
       duration: EXPAND_DURATION
     });
 
     card.style.width = cardWidthStart + 'px';
 
-    return {card: card, keyframes: keyframes, options: options};
+    return new settings.animation.Animation(card, keyframes, options);
   },
 
   /**
    * Cleans up after animateCollapse().
    * @param {boolean} finished Whether the animation finished successfully.
    */
   cleanUpAnimateCollapse: function(finished) {
     if (finished)
       this.$.card.style.width = '';
   },
 });
-
-/**
- * Information needed by TransitionBehavior to schedule animations.
- * @typedef {{
- *   card: !HTMLElement,
- *   keyframes: !Array<!Object>,
- *   options: !KeyframeEffectOptions
- * }}
- */
-SettingsSectionElement.AnimationConfig;