Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(170)

Side by Side Diff: chrome/browser/resources/settings/settings_page/settings_animated_pages.js

Issue 2889653005: MD Settings: Shorten page fade transitions (Closed)
Patch Set: Created 3 years, 7 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch
OLDNEW
1 // Copyright 2015 The Chromium Authors. All rights reserved. 1 // Copyright 2015 The Chromium Authors. All rights reserved.
2 // Use of this source code is governed by a BSD-style license that can be 2 // Use of this source code is governed by a BSD-style license that can be
3 // found in the LICENSE file. 3 // found in the LICENSE file.
4 4
5 /** 5 /**
6 * @fileoverview 6 * @fileoverview
7 * 'settings-animated-pages' is a container for a page and animated subpages. 7 * 'settings-animated-pages' is a container for a page and animated subpages.
8 * It provides a set of common behaviors and animations. 8 * It provides a set of common behaviors and animations.
9 * 9 *
10 * Example: 10 * Example:
(...skipping 101 matching lines...) Expand 10 before | Expand all | Expand 10 after
112 this.queuedRouteChange_.oldRoute)); 112 this.queuedRouteChange_.oldRoute));
113 }, 113 },
114 114
115 /** @protected */ 115 /** @protected */
116 currentRouteChanged: function(newRoute, oldRoute) { 116 currentRouteChanged: function(newRoute, oldRoute) {
117 this.previousRoute_ = oldRoute; 117 this.previousRoute_ = oldRoute;
118 118
119 if (newRoute.section == this.section && newRoute.isSubpage()) { 119 if (newRoute.section == this.section && newRoute.isSubpage()) {
120 this.switchToSubpage_(newRoute, oldRoute); 120 this.switchToSubpage_(newRoute, oldRoute);
121 } else { 121 } else {
122 this.$.animatedPages.exitAnimation = 'fade-out-animation'; 122 this.$.animatedPages.exitAnimation = 'settings-fade-out-animation';
123 this.$.animatedPages.entryAnimation = 'fade-in-animation'; 123 this.$.animatedPages.entryAnimation = 'settings-fade-in-animation';
124 this.$.animatedPages.selected = 'default'; 124 this.$.animatedPages.selected = 'default';
125 } 125 }
126 }, 126 },
127 127
128 /** 128 /**
129 * Selects the subpage specified by |newRoute|. 129 * Selects the subpage specified by |newRoute|.
130 * @param {!settings.Route} newRoute 130 * @param {!settings.Route} newRoute
131 * @param {!settings.Route} oldRoute 131 * @param {!settings.Route} oldRoute
132 * @private 132 * @private
133 */ 133 */
(...skipping 11 matching lines...) Expand all
145 if (oldRoute.isSubpage() && newRoute.depth > oldRoute.depth) { 145 if (oldRoute.isSubpage() && newRoute.depth > oldRoute.depth) {
146 // Slide left for a deeper subpage. 146 // Slide left for a deeper subpage.
147 this.$.animatedPages.exitAnimation = 'slide-left-animation'; 147 this.$.animatedPages.exitAnimation = 'slide-left-animation';
148 this.$.animatedPages.entryAnimation = 'slide-from-right-animation'; 148 this.$.animatedPages.entryAnimation = 'slide-from-right-animation';
149 } else if (oldRoute.depth > newRoute.depth) { 149 } else if (oldRoute.depth > newRoute.depth) {
150 // Slide right for a shallower subpage. 150 // Slide right for a shallower subpage.
151 this.$.animatedPages.exitAnimation = 'slide-right-animation'; 151 this.$.animatedPages.exitAnimation = 'slide-right-animation';
152 this.$.animatedPages.entryAnimation = 'slide-from-left-animation'; 152 this.$.animatedPages.entryAnimation = 'slide-from-left-animation';
153 } else { 153 } else {
154 // The old route is not a subpage or is at the same level, so just fade. 154 // The old route is not a subpage or is at the same level, so just fade.
155 this.$.animatedPages.exitAnimation = 'fade-out-animation'; 155 this.$.animatedPages.exitAnimation = 'settings-fade-out-animation';
156 this.$.animatedPages.entryAnimation = 'fade-in-animation'; 156 this.$.animatedPages.entryAnimation = 'settings-fade-in-animation';
157 157
158 if (!oldRoute.isSubpage()) { 158 if (!oldRoute.isSubpage()) {
159 // Set the height the expand animation should start at before 159 // Set the height the expand animation should start at before
160 // beginning the transition to the new subpage. 160 // beginning the transition to the new subpage.
161 // TODO(michaelpg): Remove MainPageBehavior's dependency on this 161 // TODO(michaelpg): Remove MainPageBehavior's dependency on this
162 // height being set. 162 // height being set.
163 this.style.height = this.clientHeight + 'px'; 163 this.style.height = this.clientHeight + 'px';
164 this.async(function() { 164 this.async(function() {
165 this.style.height = ''; 165 this.style.height = '';
166 }); 166 });
(...skipping 27 matching lines...) Expand all
194 // instance, such that the stamped instance will also be ignored by the 194 // instance, such that the stamped instance will also be ignored by the
195 // searching algorithm. 195 // searching algorithm.
196 if (template.hasAttribute('no-search')) 196 if (template.hasAttribute('no-search'))
197 subpage.setAttribute('no-search', ''); 197 subpage.setAttribute('no-search', '');
198 198
199 // Render synchronously so neon-animated-pages can select the subpage. 199 // Render synchronously so neon-animated-pages can select the subpage.
200 template.if = true; 200 template.if = true;
201 template.render(); 201 template.render();
202 }, 202 },
203 }); 203 });
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698