Call el.offsetHeight; to force update of computed style.

Transitions does not work if change is 'auto' -> '0'. As work around code sets
height to offsetHeight before changing height to '0'. However Blink still uses
computed style and does not starts transition. So we have to call el.offsetHeight
to force update computed style.

Removed unused argument from onFadeOutTransitionEnd.

BUG=330604

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

git-svn-id: svn://svn.chromium.org/chrome/trunk/src@245280 0039d316-1c4b-4281-b951-d872f2087c98
parent 925a012f
...@@ -64,10 +64,10 @@ function fadeOutElement(el) { ...@@ -64,10 +64,10 @@ function fadeOutElement(el) {
el.style.height = 'auto'; el.style.height = 'auto';
var height = el.offsetHeight; var height = el.offsetHeight;
el.style.height = height + 'px'; el.style.height = height + 'px';
var animName = addAnimation(''); el.offsetHeight; // Should force an update of the computed style.
var eventTracker = new EventTracker(); var eventTracker = new EventTracker();
eventTracker.add(el, 'webkitTransitionEnd', eventTracker.add(el, 'webkitTransitionEnd',
onFadeOutTransitionEnd.bind(el, animName, eventTracker), onFadeOutTransitionEnd.bind(el, eventTracker),
false); false);
el.classList.add('closing'); el.classList.add('closing');
el.classList.remove('visible'); el.classList.remove('visible');
...@@ -75,16 +75,14 @@ function fadeOutElement(el) { ...@@ -75,16 +75,14 @@ function fadeOutElement(el) {
/** /**
* Executes when a fade out animation ends. * Executes when a fade out animation ends.
* @param {string} animationName The name of the animation to be removed.
* @param {EventTracker} eventTracker The |EventTracker| object that was used * @param {EventTracker} eventTracker The |EventTracker| object that was used
* for adding this listener. * for adding this listener.
* @param {WebkitTransitionEvent} event The event that triggered this listener. * @param {WebkitTransitionEvent} event The event that triggered this listener.
* @this {HTMLElement} The element where the transition occurred. * @this {HTMLElement} The element where the transition occurred.
*/ */
function onFadeOutTransitionEnd(animationName, eventTracker, event) { function onFadeOutTransitionEnd(eventTracker, event) {
if (event.propertyName != 'height') if (event.propertyName != 'height')
return; return;
fadeInOutCleanup(animationName);
eventTracker.remove(this, 'webkitTransitionEnd'); eventTracker.remove(this, 'webkitTransitionEnd');
this.hidden = true; this.hidden = true;
} }
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment