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

Side by Side Diff: chrome/browser/resources/print_preview/print_preview_animations.js

Issue 139963002: Call el.offsetHeight; to force update of computed style. (Closed) Base URL: svn://svn.chromium.org/chrome/trunk/src
Patch Set: Created 6 years, 11 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 | Annotate | Revision Log
« no previous file with comments | « no previous file | no next file » | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
OLDNEW
1 // Copyright (c) 2012 The Chromium Authors. All rights reserved. 1 // Copyright (c) 2012 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 // Counter used to give webkit animations unique names. 5 // Counter used to give webkit animations unique names.
6 var animationCounter = 0; 6 var animationCounter = 0;
7 7
8 function addAnimation(code) { 8 function addAnimation(code) {
9 var name = 'anim' + animationCounter; 9 var name = 'anim' + animationCounter;
10 animationCounter++; 10 animationCounter++;
(...skipping 46 matching lines...) Expand 10 before | Expand all | Expand 10 after
57 * Fades out an element. Used for both printing options and error messages 57 * Fades out an element. Used for both printing options and error messages
58 * appearing underneath the textfields. 58 * appearing underneath the textfields.
59 * @param {HTMLElement} el The element to be faded out. 59 * @param {HTMLElement} el The element to be faded out.
60 */ 60 */
61 function fadeOutElement(el) { 61 function fadeOutElement(el) {
62 if (!el.classList.contains('visible')) 62 if (!el.classList.contains('visible'))
63 return; 63 return;
64 el.style.height = 'auto'; 64 el.style.height = 'auto';
65 var height = el.offsetHeight; 65 var height = el.offsetHeight;
66 el.style.height = height + 'px'; 66 el.style.height = height + 'px';
67 var animName = addAnimation(''); 67 el.offsetHeight; // Should force an update of the computed style.
Noam Samuel 2014/01/15 22:08:44 Should this have a TODO attached to it to remove i
68 var eventTracker = new EventTracker(); 68 var eventTracker = new EventTracker();
69 eventTracker.add(el, 'webkitTransitionEnd', 69 eventTracker.add(el, 'webkitTransitionEnd',
70 onFadeOutTransitionEnd.bind(el, animName, eventTracker), 70 onFadeOutTransitionEnd.bind(el, eventTracker),
71 false); 71 false);
72 el.classList.add('closing'); 72 el.classList.add('closing');
73 el.classList.remove('visible'); 73 el.classList.remove('visible');
74 } 74 }
75 75
76 /** 76 /**
77 * Executes when a fade out animation ends. 77 * Executes when a fade out animation ends.
78 * @param {string} animationName The name of the animation to be removed.
79 * @param {EventTracker} eventTracker The |EventTracker| object that was used 78 * @param {EventTracker} eventTracker The |EventTracker| object that was used
80 * for adding this listener. 79 * for adding this listener.
81 * @param {WebkitTransitionEvent} event The event that triggered this listener. 80 * @param {WebkitTransitionEvent} event The event that triggered this listener.
82 * @this {HTMLElement} The element where the transition occurred. 81 * @this {HTMLElement} The element where the transition occurred.
83 */ 82 */
84 function onFadeOutTransitionEnd(animationName, eventTracker, event) { 83 function onFadeOutTransitionEnd(eventTracker, event) {
85 if (event.propertyName != 'height') 84 if (event.propertyName != 'height')
86 return; 85 return;
87 fadeInOutCleanup(animationName);
88 eventTracker.remove(this, 'webkitTransitionEnd'); 86 eventTracker.remove(this, 'webkitTransitionEnd');
89 this.hidden = true; 87 this.hidden = true;
90 } 88 }
91 89
92 /** 90 /**
93 * Executes when a fade in animation ends. 91 * Executes when a fade in animation ends.
94 * @param {EventTracker} eventTracker The |EventTracker| object that was used 92 * @param {EventTracker} eventTracker The |EventTracker| object that was used
95 * for adding this listener. 93 * for adding this listener.
96 * @param {WebkitAnimationEvent} event The event that triggered this listener. 94 * @param {WebkitAnimationEvent} event The event that triggered this listener.
97 * @this {HTMLElement} The element where the transition occurred. 95 * @this {HTMLElement} The element where the transition occurred.
(...skipping 65 matching lines...) Expand 10 before | Expand all | Expand 10 after
163 while (el.childNodes.length > 0) 161 while (el.childNodes.length > 0)
164 div.appendChild(el.firstChild); 162 div.appendChild(el.firstChild);
165 el.appendChild(div); 163 el.appendChild(div);
166 } 164 }
167 165
168 div.className = ''; 166 div.className = '';
169 div.classList.add('collapsible'); 167 div.classList.add('collapsible');
170 for (var i = 0; i < classes.length; i++) 168 for (var i = 0; i < classes.length; i++)
171 div.classList.add(classes[i]); 169 div.classList.add(classes[i]);
172 } 170 }
OLDNEW
« no previous file with comments | « no previous file | no next file » | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698