Settings page sliding transition

chrome/browser/resources/options/browser_options.js

 // Copyright (c) 2012 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.
 
 cr.define('options', function() {
   var OptionsPage = options.OptionsPage;
   var Page = cr.ui.pageManager.Page;
   var PageManager = cr.ui.pageManager.PageManager;
   var ArrayDataModel = cr.ui.ArrayDataModel;
   var RepeatingButton = cr.ui.RepeatingButton;
@@ skipping 55 matching lines @@
 
     /**
      * Track if page initialization is complete.  All C++ UI handlers have the
      * chance to manipulate page content within their InitializePage methods.
      * This flag is set to true after all initializers have been called.
      * @type {boolean}
      * @private
      */
     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);
       var self = this;
 
       if (window.top != window) {
         // The options page is not in its own window.
         document.body.classList.add('uber-frame');
         PageManager.horizontalOffset = 155;
       }
@@ skipping 644 matching lines @@
       // end event as the upcoming code will cancel the current one.
       if (section.classList.contains('sliding'))
         cr.dispatchSimpleEvent(section, 'webkitTransitionEnd');
 
       this.addTransitionEndListener_(section);
 
       section.hidden = false;
       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';
     },
 
     /**
      * Shows the given section.
      * @param {HTMLElement} section The section to be shown.
      * @param {HTMLElement} container The container for the section. Must be
      *     inside of |section|.
      * @param {boolean} animate Indicate if the expansion should be animated.
      * @private
      */
@@ skipping 1209 matching lines @@
     BrowserOptions.getLoggedInUsername = function() {
       return BrowserOptions.getInstance().username_;
     };
   }
 
   // Export
   return {
     BrowserOptions: BrowserOptions
   };
 });