Schedule sliding transition after height change

On the BrowserOptions page, sections that are supposed to hide with an upward sliding transition instead hide instantly.

This is apparently because the style recalc that adds the CSS transition also sets the new section height (i.e., the first style recalc usually doesn't happen before the setTimeout is triggered in animatedSectionHeightChange_). To work around this, force a recalc before setting the new height.

BUG=394053
R=dbeam@chromium.org

Review URL: https://codereview.chromium.org/393943003

Cr-Commit-Position: refs/heads/master@{#294285}

chrome/browser/resources/options/browser_options.js

@@ -73,14 +73,6 @@ cr.define('options', function() {
      */
     initializationComplete_: false,
 
-    /**
-     * When a section is waiting to change its height, this will be a number.
-     * Otherwise it'll be null.
-     * @type {?number}
-     * @private
-     */
-    sectionHeightChangeTimeout_: null,
-
     /** @override */
     initializePage: function() {
       Page.prototype.initializePage.call(this);
@@ -745,13 +737,11 @@ cr.define('options', function() {
       section.style.height = (showing ? 0 : container.offsetHeight) + 'px';
       section.classList.add('sliding');
 
-      if (this.sectionHeightChangeTimeout_ !== null)
-        clearTimeout(this.sectionHeightChangeTimeout_);
+      // Force a style recalc before starting the animation.
+      /** @suppress {uselessCode} */
+      section.offsetHeight;
 
-      this.sectionHeightChangeTimeout_ = setTimeout(function() {
-        section.style.height = (showing ? container.offsetHeight : 0) + 'px';
-        this.sectionHeightChangeTimeout_ = null;
-      });
+      section.style.height = (showing ? container.offsetHeight : 0) + 'px';
     },
 
     /**