Ignore transitions when measuring an elements dimensions

Question

Is there an elegant way to predict the dimension an element will have after the elements transition is complete?

Example:

HTML:

<div id="demo">...</div>

CSS:

#demo {
  max-height: 0;
  overflow:hidden;
  transition: 2s max-height;
}

#demo.expand {
  max-height: 1000px;
}

JS:

 var demo = document.getElementById('demo');
 demo.className = 'expand';
 // Unfortunately the result will be 0px 
 // because the current height is measured
 alert(demo.offsetHeight);

Demo:

codepen

Answer 1

Is there an elegant way to measure the dimension an element will have after the elements transition is complete?

You can use the transitionend event to look at the height of your element after the transition is finished:

$('#demo').on("transitionend", function(e) { 
    console.log($('#demo').height());
}).addClass('expand');

This will get you a value of 20, which I assume is what you are looking for?
jsFiddle

Answer 2

You can check the requested rendering height/width of content through the scrollHeight and scrollWidth properties.

e.g. try adding alert(demo.scrollHeight); to the JS pane.

Answer 3

BlakeGru's answer works great for the OP's question, but doesn't work for similar problems that I've encountered. For completeness, and in case it's useful for others, here is a general strategy for finding the final dimensions an element will have once any transitions have been completed, before said transitions actually begin.

This example changes the width of an element (with a transition) and gets the height (which is determined automatically by content) that the element will have once the transition has finished.

function resize(element, endingWidth) {
  // First, save any set transitions for later.
  var transitions = window.getComputedStyle(element).transition;
  // Now, disable any transitions so that our calculations will work properly.
  element.style.transition = 'none';
  // Get our current width.
  var startingWidth = element.offsetWidth + 'px';

  // Set a new width.
  element.style.width = endingWidth;
  // And get the element height. Because there are no transitions set, this will be the same height as at the end of any transitions.
  var endingHeight = element.offsetHeight;

  /*
   * Now do whatever calculations we want with the ending height.
   */
  alert(endingHeight);

  // Set the element's width back to when we started, so we have a start point for our transition.
  element.style.width = startingWidth;
  // Force the browser to recalculate the element's dimensions. This seemingly pointless call is absolutely critical for the transition to work.
  element.offsetWidth;

  // Now, we can set our desired transitions and the ending width again, and we're away.
  element.style.transition = transitions;
  element.style.width = endingWidth;
}

Fiddle

The general idea is:

• Remove any transitions.
• Make the desired changes to the element's dimensions.
• Measure whatever final dimensions are required.
• Reset the element's dimensions to the initial values.
• Reinstate the transitions.
• Make the desired changes again.